Sticky Header，达到一个点

Question

我有一个类“sticky”被添加到div，当它到达页面顶部时，将它的css位置固定。

当用户到达该部分页面的底部时，我想要删除粘性类。

该标题仅与页面的一部分相关。

有关如何将其添加到我当前的代码的任何想法？

<script> 
    $(document).ready(function() { 
     var stickyNavTop = $('.header').offset().top; 

     var stickyNav = function(){ 
      var scrollTop = $(window).scrollTop(); 

      if (scrollTop > stickyNavTop) { 
       $('.header').addClass('sticky'); 
      } else { 
       $('.header').removeClass('sticky'); 
      } 
     }; 

     stickyNav(); 

     $(window).scroll(function() { 
      stickyNav(); 
     }); 
    }); 
</script> 

Answer 1

JS Fiddle

使用这个功能来计算，如果滚动达到

我已经添加padding到container页面结束的时候，header变化fixed所以document的高度保持不变

document height - window height它会给你val UE在滚动到达最后一个领域

function scrolling() { 
    doc = $(document).height() 
    win = $(window).height() 
    height = doc - win 
    if ($(window).scrollTop() >= height) { 
     $('.header').removeClass('sticky'); 
     $('.container').css('padding-top', '0'); 
    } 
} 

编辑

改变了功能找到，如果滚动进来的div和显示隐藏的范围

如果滚动进来蓝格的范围它会得到正常，否则它会得到fixed

JS Fiddle

function scrolling() { 
    doc = $(document).height() 
    hidingtop = $('.hiding').offset().top; 
    hidingbottom = $('.hiding').position().top + $('.hiding').outerHeight(true) 
    if ($(window).scrollTop() > hidingtop && $(window).scrollTop() < hidingbottom) { 
     $('.header').removeClass('sticky'); 
     $('.container').css('padding-top', '0'); 
    } 
}