使用JavaScript更改了固定HTML元素的位置

我想知道是否可以使用“position：fixed”移动div或其他元素。我希望它不受滚动的影响，我可能会设置它，所以你可以通过点击和拖动来移动它，但我甚至不能让它变动。 “固定”元素无法做到这一点？使用JavaScript更改了固定HTML元素的位置

#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>

来源

2017-09-08 EndUserAbuser

尝试：

您需要指定值单元（像素例如），检查this文件的其他单位。

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

来源

2017-09-08 15:11:43 codtex

哎，当然!!非常感谢您的快速响应。 – EndUserAbuser

欢迎你的朋友，很高兴帮助，现在更新了你可以用不同的单位玩的例子:) – codtex

该死的我喜欢“运行代码片段”功能，这是伟大的@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>

来源

2017-09-08 15:25:24

是的，我需要“px”我很想把这个问题放在一个令人尴尬的问题上。感谢您的回答。 – EndUserAbuser

使用JavaScript更改了固定HTML元素的位置

回答

相关问题