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

Tips for implementing a sticky sidebar in HTML5 with jQuery

Unable to scroll to the top of the page with JavaScript

The arrow function in Jest is missing a name property

When the React functional component changes its state, it triggers the un-mounting and re-mounting of its parent

Trouble With Ajax Submission in CakePhp: Issue with Form Serialization

Transforming JSON data into XML using Angular 7

The event SelectedIndexChanged is not triggering as expected on dropdown lists that are created dynamically

TSLint is encountering the error code TS2459: The module "@azure/core-tracing" claims to have a local declaration of "Span" but does not export it, along with additional errors

The HTML source code in the browser varies from the output obtained through Python requests

Issues with the Bootstrap date time picker functionality

Determining if an item is located within a nested scroll container

Import the information into a td tag's data-label property

Does the AngularJS Controller disappear when the DOM element is "deleted"?

Using Angular to open a modal by invoking the href function

Creating personalized hooks that rely on React query requests

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

Vue-bootstrap spinbutton form with customizable parameters

LESS — transforming data URIs with a painting mixin

jQuery sends ajax success to input type number

How to send parameters to Bootstrap modal using a hyperlink