我正在尝试构建一个可以在我的页面上拖动的菜单。 我制作了这个可拖动的菜单。
我的问题是，当我向下滚动页面时，菜单不会保留，因此菜单会消失。
我已将菜单的位置属性设置为“绝对”以使其可拖动。
当我向下滚动页面或当我使用超链接跳转页面时，有什么方法可以使菜单“固定”。
注意: 菜单由两个 div 组成。当您按下“菜单”时，您会打开不同的超链接，因此您也可以使用这些超链接跳转页面。
谢谢你抽空
#div_drag {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
font-family: actor;
text-align: center;
border: 1px solid;
border-radius: 50%;
width: 70px;
height: 70px;
padding: 10px;
cursor: move;
top: 60px;
left: 60px;
}
a {
text-decoration: none;
color: black;
}
a.color {
color: white;
}
.test {
background-color: blue;
height: 900px;
}<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet'>
<script src="jquery-3.3.1.min.js"></script>
</link>
</head>
<body>
<div id="div_drag">
<a onclick="document.getElementById('div_name2').style.display='';return false;" href=""><br>menu</a>
<div id="div_name2" style="display:none;position: absolute;z-index: 10;background-color: black;font-family:actor;text-align center;width:170px;height:170px;padding: 10px;cursor: move;top:-20px;left:-20px;">
<a href="firstyear.html" class="color">+2018</a>
<br></br>
<a href="#1" class="color">1</a>
<a href="#2" class="color">2</a>
<a href="#3" class="color">3</a>
<a href="secondyear.html" class="color">+2017</a>
<br></br>
<a href="thirdyear.html" class="color">+2016</a>
<br></br>
<a href="fourthyear.html" class="color">+2015</a>
<br></br>
<a onclick="document.getElementById('div_name2').style.display='none';return false;" href="">hide</a>
</div>
</div>
<script>
dragElement(document.getElementById(("div_drag")));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<div class="test">
<a name="1"></a>
hello!
</div>
<div class="test">
<a name="2"></a>
hello!
</div>
<div class="test">
<a name="3"></a>
hello!
</div>
</body>
</html>最佳答案
为什么不使用固定位置？
#div_drag {
position: fixed;
z-index: 9;
background-color: #f1f1f1;
font-family: actor;
text-align: center;
border: 1px solid;
border-radius: 50%;
width: 70px;
height: 70px;
padding: 10px;
cursor: move;
top: 60px;
left: 60px;
}
a {
text-decoration: none;
color: black;
}
a.color {
color: white;
}
.test {
background-color: blue;
height: 900px;
}<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet'>
<script src="jquery-3.3.1.min.js"></script>
</link>
</head>
<body>
<div id="div_drag">
<a onclick="document.getElementById('div_name2').style.display='';return false;" href=""><br>menu</a>
<div id="div_name2" style="display:none;position: absolute;z-index: 10;background-color: black;font-family:actor;text-align center;width:170px;height:170px;padding: 10px;cursor: move;top:-20px;left:-20px;">
<a href="firstyear.html" class="color">+2018</a>
<br></br>
<a href="#1" class="color">1</a>
<a href="#2" class="color">2</a>
<a href="#3" class="color">3</a>
<a href="secondyear.html" class="color">+2017</a>
<br></br>
<a href="thirdyear.html" class="color">+2016</a>
<br></br>
<a href="fourthyear.html" class="color">+2015</a>
<br></br>
<a onclick="document.getElementById('div_name2').style.display='none';return false;" href="">hide</a>
</div>
</div>
<script>
dragElement(document.getElementById(("div_drag")));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<div class="test">
<a name="1"></a>
hello!
</div>
<div class="test">
<a name="2"></a>
hello!
</div>
<div class="test">
<a name="3"></a>
hello!
</div>
</body>
</html>关于javascript - 滚动页面时可拖动的 div 保持在原位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51022773/