Geänderte Position des festen HTML-Elements mit JavaScript

Ich frage mich, ob es möglich ist, ein div oder ein anderes Element mit "position: fixed;" Ich möchte, dass es nicht vom Scrollen beeinflusst wird und ich werde es wahrscheinlich so einrichten, dass Sie es mit einem Klick und Ziehen bewegen können, aber ich kann es nicht einmal rühren. Sind "feste" Elemente dazu nicht in der Lage?Geänderte Position des festen HTML-Elements mit JavaScript

#menu { 
    position:fixed; 
    margin-top: -110px; 
    margin-left: 300px; 
    //its now top:110px; left:300px; 
} 
<TABLE id="menu"> 
    my menu here 
</TABLE> 

<script type="text/javascript"> 
    var d = document.getElementById('menu'); 
    d.style.left =d.style.left+2; //doesn't work 
    d.style.top = '5'; // doesn't work 
</script>

Quelle

2017-09-08 EndUserAbuser

Versuchen:

d.style.left = d.style.left + 2 + 'px'; 
d.style.top = '5px';

Sie müssen die Werte Einheiten spezifizieren (Pixel zum Beispiel), überprüfen this Dokument für andere Einheiten.

var menu = document.getElementById('menu'); 
 
var unit = document.getElementById('unit'); 
 
var offset = 0; 
 

 
menu.style.top = '5px'; 
 

 
function move(){ 
 
    offset += 20; 
 
    menu.style.left = offset + unit.value; 
 
}; 
 

 
function reset(){ 
 
    offset = 0; 
 
    menu.style.left = '0px'; 
 
};

#menu { 
 
    width: 200px; 
 
    background-color: blue; 
 
    position:fixed; 
 
    color: white 
 
}

<div id="menu"> 
 
    my menu here 
 
</div> 
 
<br/> 
 
<span>Unit</span> 
 
<select id="unit"> 
 
    <option value="px">px</option> 
 
    <option value="em">em</option> 
 
    <option value="ex">ex</option> 
 
    <option value="%">%</option> 
 
    <option value="cm">cm</option> 
 
    <option value="mm">mm</option> 
 
    <option value="in">in</option> 
 
    <option value="pt">pt</option> 
 
    <option value="pc">pc</option> 
 
</select> 
 
<br/> 
 
<button onclick="move()">Move</button> 
 
<button onclick="reset()">Reset</button> 
 
<br/> 
 
Play with "Move" and "Reset" buttons to see the difference between units

Quelle

2017-09-08 15:11:43 codtex

Ugh, natürlich !! Vielen Dank für die schnelle Antwort. – EndUserAbuser

Sie sind willkommen Freund, froh zu helfen, jetzt aktualisiert das Beispiel, das Sie mit den verschiedenen Einheiten spielen können :) – codtex

verdammt ich liebe die "Run Code Snippet" -Funktion, das ist großartig @codtex – EndUserAbuser

-1

try the below code, it is working for me. You can see that the 2px margin in the inline style in developer tools

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta lang="en"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<style> 
 
    #menu { 
 
    position: fixed; 
 
    margin-top: 110px; 
 
    margin-left: 300px; 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <table id="menu"> 
 
    <tbody> 
 
     <tr> 
 
     <td>one</td> 
 
     <td>two</td> 
 
     <td>three</td> 
 
     </tr> 
 

 
    </tbody> 
 
    </table> 
 

 
    <script type="text/javascript"> 
 
    var d = document.getElementById('menu'); 
 
    d.style.left = d.style.left + 2 + "px"; 
 
    d.style.top = '5' + "px"; 
 
    </script> 
 
</body>

Quelle

2017-09-08 15:25:24

Ja, ich brauchte die "px", Ich bin versucht, die Frage ein wenig peinlich ha zu nehmen. Danke für deine Antwort. – EndUserAbuser

Geänderte Position des festen HTML-Elements mit JavaScript

Antwort

Verwandte Themen