Question

我有一个元素，我希望在它到达屏幕顶部后粘在上面。

<div id="HeaderWrapper">
  ...
  <div id="Navigation">
    Navigation
  </div>
  ...
</div>

我在scroll上添加一个事件监听器，它会调用一个函数来检查元素的发布方式，使用getBoundingClientRect()方法。如果元素的top或y相对于视口小于0，那么我想修复/粘贴标题。再次如果它超过0然后我想删除修复位置。在这两种情况下，我都添加并删除了具有固定位置属性的fixed_navbar类名称。

document.addEventListener("scroll", function() {
  const el = document.getElementById("Navigation");
  let rect = el.getBoundingClientRect();
  if (rect.top <= 0) {
    el.classList.add("fixed_navbar");
  } else {
    el.classList.remove("fixed_navbar");
  }
});

您还可以查看codepen demo。

当元素的位置顶部大于零时，它可以正常工作。此外，当向下滚动到元素顶部位置小于0的位置时，它会粘到页面并具有固定的属性。但是当元素的顶部大于0时滚动回到位置时，该元素仍然具有固定的属性并且粘在屏幕的顶部。如何在元素到达屏幕顶部时使元素粘到顶部，当元素位于屏幕顶部下方时再次移除固定位置？

Answer 1

只需使用CSS即可实现此目的：

position: sticky

当声明position: sticky;时， 还需要声明top样式（例如。top: 0;）以指示您希望元素成为哪一点＆＃34;卡住＆＃34;

工作示例：

＆＃13;
＆＃13;
header { height: 600px; } .navigation { position: sticky; top: 0; margin-top: 150px; }
＆＃13;
<header> <div class="navigation">Navigation</div> </header>
＆＃13;
＆＃13;
＆＃13;

更多信息：

position: sticky适用于以下浏览器：

https://caniuse.com/#feat=css-sticky

Answer 2

试试这个

 if (rect.top <= 0) {

在if条件下你写 rect.top＆lt; 0 这对您的要求是错误的

Answer 3

@Rounin提供了一个很棒的解决方案。虽然我在JavaScript中解决了您的问题。你可以查看这个

document.addEventListener("scroll", function() {
  const el = document.getElementById("Navigation");
  let rect = el.getBoundingClientRect();
  if (rect.top <= 0) {
    el.classList.add("fixed_navbar");
  } else {
   window.onscroll = function() {myFunction()};

function myFunction() {
    if ( document.body.scrollTop < 100 ) {
        el.classList.remove("fixed_navbar");
    } 
  }
  }
});

* {
  margin: 0;
  padding: 0;
}

#HeaderWrapper {
  background: lightgrey;
  height: 1500px;
}

.box {
  background: skyblue;
  width: 100%;
  height: 100px;
}

#Navigation {
  background: green;
}

.fixed_navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
  left: 0;
  top: 0;
}

<div id="HeaderWrapper">
  <div class="box"></div>
  <div id="Navigation">
    Navigation
  </div>
</div>

使用javascript和css

3 个答案: