Question

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

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

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

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

注意：菜单包含两个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>

Answer 1

为什么不使用固定位置？

"SELECT * FROM PC where Postcode = '" + postCode + "' Order by  cast(House_number as unsigned)"

 Set myDocument = Worksheets(1) 
    With myDocument.Shapes.AddShape(msoShapeRectangle, 90, 90, 90, 50).Fill 
        .ForeColor.RGB = RGB(128, 0, 0) 
        .BackColor.RGB = RGB(170, 170, 170) 
        .TwoColorGradient msoGradientHorizontal, 1 
    End With

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

1 个答案: