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