Ensuring draggable div remains fixed while scrolling through the page

Question

Ensuring draggable div remains fixed while scrolling through the page

I am currently working on creating a draggable menu for my website. The menu is functional and can be moved around the page as intended.

However, I have encountered an issue where the menu disappears when scrolling down the page due to its position attribute being set to "absolute" in order to enable dragging functionality.

Is there a way to make the menu stay fixed in place when scrolling or jumping to different sections of the page using hyperlinks?

Note: The menu comprises two divs. Clicking on "menu" reveals various hyperlinks that allow users to navigate through the page.

Thank you for taking the time to read this.

javascript jquery html css

Answer 1

Answer №1

Why is fixed positioning not recommended?

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

Answer 2

Why is fixed positioning not recommended?

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

Ensuring draggable div remains fixed while scrolling through the page

Answer №1

Similar questions

What is the process of triggering an email send via a button click in Django?

convert JSON to Java object using GSON with a map

How to integrate VLC media player into an HTML webpage

Preventing AJAX/hash functionality for specific links exclusively within jQuery Mobile

Enhancing material appearance by incorporating color gradient through the extension of three.js Material class using the onBeforeCompile method

Create a webpage in full screen mode with a video player that fills the entire screen

What is the best way to eliminate an object from an array of objects that fulfills a specific condition?

Compel the browser to launch a fresh tab

using eloquent in vuejs to fetch database columns

Rearrange the items in an array that contain different data types

Sending JSON data from PHP to JavaScript using Ajax

Tips for utilizing Plunker or JSFiddle to execute Angular2 code

The inline display property does not function properly with the <li> element

403 access denied when trying to run an ajax page

JavaScript encountering a NaN value

What is the method for altering a CSS element's keyframe animation while it is currently running?

centering an angular material card on the webpage

"Troubleshooting: Why isn't my Bootstrap alert displaying properly after implementing Ajax

Fade in and out on button press

Change the classes of the body prior to the initial rendering