可拖动的div在滚动页面时保持在原位

Question

I'm trying to build a menu which can be dragged around my page. 我正在尝试构建一个可以在页面上拖动的菜单。 I've made this menu which is draggable. 我制作了可拖动的菜单。

My problem is when I scroll down the page the menu doesn't stays and therefore the menu dissapears. 我的问题是，当我向下滚动页面时，菜单不会停留，因此菜单消失了。

I've put the position attribute of the menu to "absolute" in order to make it draggable. 我已将菜单的position属性设置为“ absolute”，以使其可拖动。

Is there any way to make the menu "fixed" when I scroll down the page or when I jump the page with a hyperlink. 当我向下滚动页面或使用超链接跳转页面时，有什么方法可以使菜单“固定”。

note: The menu consists of two divs. 注意：菜单包含两个div。 when you press "menu" you open up to different hyperlinks and you can thereby also jump the page with these hyperlinks. 当您按“菜单”时，将打开不同的超链接，因此您也可以使用这些超链接跳转页面。

Thank you fro your time 谢谢你的时间

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

Answer 1

Why not use position fixed? 为什么不使用固定位置？

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

可拖动的div在滚动页面时保持在原位

问题描述

1 个解决方案

解决方案1
2 2018-06-25 11:52:58

可拖动的div在滚动页面时保持在原位

问题描述

1 个解决方案

解决方案1 2 2018-06-25 11:52:58

解决方案1
2 2018-06-25 11:52:58