Javascript 如何在div返回到其原始点时移除粘性类

我有两个导航条，第二个导航条在到达视口顶部时会变得粘滞，我遇到的问题是，当上面包含原始导航条的div返回视口时，它会“取消粘滞”，以便可以再次看到第一个导航条

对于糟糕的解释和含糊不清的标题，我感到抱歉，我很难解释如何描述它

这里有一个例子可以让你更好地理解我的意思，任何帮助都将不胜感激，因为我在javascript方面很差，谢谢

（jfiddle中的HTML和CSS）

---

Bootstrap4中有一个很好的解决方案，我在一些站点上使用它。您需要做的唯一一件事就是将这个类添加到导航栏中。查看下面的代码片段

请注意，为了使position sticky正常工作，不能将此类添加到容器中的元素，必须将此类添加到容器本身

@支架（（位置：-webkit粘性）或（位置：粘性））{
.粘头{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
z指数：1020；
}
}
/*演示目的*/
导航{背景：红色；填充顶部：1rem；填充底部：1rem}
.第1节{高度：300px}
.第2节{高度：1000px}

第1节
乱数假文
第1节

是否要有2个粘性导航条，第二个导航条直接位于第一个导航条下方？@JakubMuda只想让第二个导航条粘性，然后在包含第一个导航条的橙色背景的div返回视口后，第二个导航条停止粘性。解决了我刚才提到的问题，但是我在实现它时遇到了困难，所以它对于下面的所有div都很棘手，而不仅仅是第一个div。对于纯CSS解决方案，您需要使nav

位于

之外。从外面看，它只会粘到container div的末尾。有一个JS解决方案，但这是最简单的解决方案。我真傻，谢谢你指出这一点。现在一切都很好！

  $('#nav2').attr("attop", false);
  var lastScrollTop = 0;
  $(window).on('scroll', function() {
    var windowScrollTop = $(this).scrollTop();


    if (windowScrollTop > lastScrollTop) {
      var header = $('#nav2[attop="false"]:first');
      if (header && header.length > 0) {
        if (windowScrollTop >= header.offset().top) {
          header.attr('attop', true);
          $('#nav2').addClass('sticky');
        }
      }

    }

    lastScrollTop = windowScrollTop;

  });
});
````