html5 : navbar로 바뀌는 동적 헤더

Question

노드/표현/백본/스타일러스/먼지에서 정적 긴 스크롤 웹 사이트를 코딩합니다.

~ 400px 헤더 이미지가 페이지 상단의 고정 된 위치에 있으며 아래로 스크롤하면 ~ 100px 탐색 막대로 축소 된 다음 통과하면서 몇 가지 상태 사이를 이동합니다 페이지의 다양한 부분.

이와 비슷한 코드를 작성하는 가장 좋은 방법은 무엇입니까? 나는 이것이 매우 광범위한 질문이며,이 질문을 구체화 할 수있는 코드가 없다는 것을 알고 있습니다. 그러나 CSS/스크립트의 조합을 사용하여 헤더가 축소 된 다음 계속 유지되고 움직이는 것을 확인하는 것이 확실하지 않습니다. 주간.

Answer 1

jQuery를 사용하여 scroll 이벤트 (http://api.jquery.com/scroll/)에 대한 이벤트 처리기를 설정 한 다음 스크롤의 현재 값이 무엇인지에 따라 헤더의 높이 또는 다른 작업을 조정하십시오. 이 코드를 수정하고 페이지에 던져 수 있습니다

이

<script> 

    $(window).scroll(function(){ 
    var $header = $('header'); 
    var scrollY = $(this).scrollTop(); 

    if (scrollY < 100){ 
     $header.css('height', '400px'); 
    } elseif(scrollY > 100 && scrollY < whatever){ 
     $header.css('height', '100px'); 
    } elseif(your next range here){ 
     ... 
    } 

</script> 

Answer 2

내 첫 번째 아이디어는 여기

body 
    div long text 
    div.navigation(data-navigation="shrink") at the beginning this div is outside of the screen are 
    div other long text 
    div.navigation(data-navigation="changeElements") i am somewhere 

    script. 

$(window).scroll(function() { 
    // get all data-navigation elements 
    var allNavigationElements = $('.navigation'), i; 
    for(i = 0; i < allNavigationElements.length; i++){ 

확인 일부 의사 코드를 자바 스크립트 에 애니메이션을 와 뷰의 요소가하는 것입니다 Check if element is visible after scrolling

 if(inview){ 
     changeNavigationTo($element.data('navigation') 
     } 
    } 
}