javascript - 滚动经过某个元素后，相同的导航栏变得固定

Question

我目前在我的标题中有一个导航栏，我想在用户滚动经过某个元素后固定它。我也想实现与 http://pixelmatters.com 相同的动画效果。

当我说“相同”时，我的意思是使用我在顶部使用的相同导航栏/标题元素，而不是在我的文档中的其他地方使用重复项。

我已经尝试使用下面显示的我自己的代码来实现他的结果。我还包含了我当前设置的 jsFiddle 链接。

jQuery

var bottomElement = $('.dividerWrap').offset().top + $('.dividerWrap').height();

$(window).on('scoll', function() {
  var stop = Math.round($(window).scrollTop());

  if (stop > bottomElement) {
    $('.header').addClass('isFixed');
  } else {
    $('.header').removeClass('isFixed');
  }

});

https://jsfiddle.net/npfc8wsx/1/

Answer 1

我几天前回答过类似的问题。请看一下这段代码:

   $(window).scroll(function () {
      var scrollTop = $(window).scrollTop();
       var scrollToVid = $('#test').offset().top
        console.log(scrollTop); //see window scroll distance //
        console.log(scrollToVid); //see scroll to div offest//

        if ($(window).scrollTop() >= scrollToVid) {
        alert('You reached to the video!');
        }
      });

jSFiddle

Main Question

现在您必须更改一些代码:

   $(window).scroll(function () {
       var scrollToElem = $('.dividerWrap').offset().top

        if ($(window).scrollTop() >= scrollToElem) {
        $('.header').addClass('isFixed');
        } else {
        $('.header').removeClass('isFixed');
        }
      });