Sticky Header, 최대 점

Question

div의 "sticky"클래스가 페이지 상단에 도달하면 CSS가 고정되도록 클래스를 추가했습니다.

사용자가 페이지의 해당 부분의 맨 아래에 도달하면 끈적 끈적한 클래스를 제거하고 싶습니다.

해당 머리글은 페이지의 일부에만 관련이 있습니다.

내 현재 코드에 추가하는 방법에 대한 의견이 있으십니까? 스크롤 내가 container에 padding 추가 한

페이지의 끝에 도달하면 계산할

<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

이 function 그래서 fixed에 header 변경됩니다 document의 높이 동일하게 유지됩니다.

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