个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 01:12:00 24 4
gpt4 key购买 nike

我正在尝试构建一个可以在我的页面上拖动的菜单。我制作了这个可拖动的菜单。

我的问题是，当我向下滚动页面时，菜单不会保留，因此菜单会消失。

我已将菜单的位置属性设置为“绝对”以使其可拖动。

当我向下滚动页面或当我使用超链接跳转页面时，有什么方法可以使菜单“固定”。

注意:菜单由两个 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/

24 4 0
文章推荐： python - 使用 Flask 对每个请求运行 jinja2 template_filter
文章推荐： c - 使用 argv 访问参数
文章推荐： javascript - Mongoose递归查询父引用
文章推荐： python - 正则表达式在 Python 中不匹配\t\n\r\f\v
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com