draggable div to stay in position when scrolling page
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.
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. 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>
1 answers
solution1
2 2018-06-25 11:52:58
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Draggable droppable - stay in position when dropped
Stop scrolling when div reaches fixed position on the page
Scrolling moves a video div to another position on the page
Set position of draggable div
position bug in draggable div
Save Draggable Div Position
Retain draggable div position
Make a fixed div stay at a certain point when scrolling
Animate a div when scrolling page
Draggable div. How to keep position after changing page and reloading
Related Tags