如何更改我的 div 在 page-load 和页面滚动中的位置

Question

我在我试图显示的元素下有一个顶栏 div 当页面重新加载时它有 top:50px 并且当用户滚动页面时位置更改为 top:175px 因为我也有 stick header，但它没有按预期工作。

它在页面加载时表现得像这样 -

它在页面加载时必须看起来像这样 -

  window.onscroll = function () { scrollFunction() };

    function scrollFunction() {
       if (!document.body.scrollTop > 1 || document.documentElement.scrollTop > 1 ) {
           document.getElementById("bar").style.top = "90px";
      }else{
           document.getElementById("bar").style.top = "175px";
      }
    }

Answer 1

首先，您的 if 语句始终为真，因为我相信 document.body.scrollTop 始终为 0（如果我错了请纠正我）document.body.scrollTop Firefox returns 0 : ONLY JS。单独使用 document.documentElement.scrollTop 即可：

if (!document.documentElement.scrollTop) {
   // Page load
   document.getElementById("bar").style.top = "90px";
}else{
   // user scrolled
   document.getElementById("bar").style.top = "175px";
}

其次，我想知道为什么您希望在用户滚动时您的栏比首次加载页面时低？如果你想让你的栏总是在你的 header 下的页面上，我建议你应该使用 css position: sticky; top: *your header height in px*

如何更改我的 div 在 page-load 和页面滚动中的位置

How to change My div position on page-load and on page scroll

html

javascript

css

jquery