Question

我有两个导航栏，一旦它击中视口顶部的第二变粘，我遇到的问题是，它上面时，该div包含原来的导航栏获取找到问题所在自带回视这样就可以再次看到第一个导航栏。

很抱歉的可怕的解释和模糊的标题，有麻烦试图如何形容它的东西。

这里有一个jsfiddle，它将使您更好地理解我的意思，感谢您的帮助，因为我在使用javascript时还很差，谢谢。

（HTML和CSS jfiddle）

  $('#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;

  });
});
````

Answer 1

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

请注意，为了使位置粘正确此类不能被添加到容器内的元件的工作，则必须将此类添加到容器本身。

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

/*DEMO PURPOSE*/
nav{background:red;padding-top:1rem;padding-bottom:1rem}
.section-1{height:300px}
.section-2{height:1000px}

<div class="section-1">Section 1</div>
<nav class="sticky-top">Lorem Ipsum</nav>
<div class="section-2">Section 1</div>

如何去除粘类一旦格返回其原始点

1 个答案: