스크롤 할 때 여러 개의 헤더 div를 붙이시겠습니까?

Question

내 페이지에 헤더가 3 개 있습니다. 그 (것)들의 사이에, 최고와 밑바닥 우두머리는 때 스크롤 될 때 끈끈 할 필요가있다. 창 하나가 scolled 얻는 때 중간 것은 숨겨 얻는다. 나는 Foundation 5를 사용하고 있지만이 경우 sticky는 페이지의 마지막 헤더에 적용됩니다.

해결책을 찾고 있습니다. 고맙습니다.

Answer 1

jQuery 스 니펫을 추가하여 페이지의 특정 지점을 스크롤 한 후에 (예 : 머리글 중 하나가 뷰포트의 맨 위에 닿는 경우) '고정'클래스를 헤더에 첨부 할 수 있습니다.

var headerTop = $('.your-header').offset().top; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > headerTop) { 
     $('.your-header').addClass('sticky'); 
    } 
    else { 
     $('.your-header').removeClass('sticky'); 
    } 
}); 

이 같은

뭔가 트릭을 할 것입니다