Question

我有一个简单的脚本：我希望在页面滚动时垂直移动我的div，但是虽然事件被触发，但div保持在相同的位置

<script type="text/javascript">
    window.onscroll = DoScroll;
    function DoScroll() {
        var mydiv = document.getElementById("myFloatingDiv");
        mydiv.top = mydiv.top + 230;             
    }
</script>  

<style>
    body {
        background-color: linen;
        margin-left: 50px;
        margin-right:60px;
        margin-top:15px;
    }

    .myFloatingDivCSS{
        position:absolute;
        left:50px;
        top:100px;
        width:20%;
        height:300px;
        background:blue;
    }
</style> 

<body>
    <div class="myFloatingDivCSS" id="myFloatingDiv" ">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>

但是我没有看到div在移动......为什么会这样？

Answer 1

我找到了我想要的答案，感谢所有写在这里的答案：

window.onscroll = DoScroll;


function DoScroll() {
    var mydiv = document.getElementById("myFloatingDiv");
    mydiv.style.top = Math.max(100, window.pageYOffset) + 'px';
  }

Answer 2

尝试使用DoScroll

  window.onwheel= DoScroll;
  function DoScroll(e) {
    var mydiv = document.getElementById("myFloatingDiv");
    var top = window.getComputedStyle(mydiv).top;
    var delta = e.wheelDelta > 0 ? 230 : -230;
    mydiv.style.top = parseInt(top) + delta + 'px';
  }

或者

  window.onscroll = DoScroll;
  function DoScroll() {
    var mydiv = document.getElementById("myFloatingDiv");
    mydiv.style.top = -window.pageYOffset + 230 + 'px';
  }

Answer 3

其他方法：

function DoScroll() {
  var mydiv = document.getElementById("myFloatingDiv");
  mydiv.style.top = mydiv.offsetTop + 230 + 'px';
}

javascript Window.onscroll垂直移动div

3 个答案: