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');
        }
      });

滚动经过某个元素后，相同的导航栏会被固定

1 个答案: