CSS를 사용하여 화면 상단에서 HTML 요소 스크롤을 중지하는 방법

Question

페이지 상단에 도달 할 때 사이트 이름/로고 및 내비게이션을 설정하려고합니다. 화면 상단에서 사라지는 대신 나는 position: fixed;을 시도했지만, 내가해야 할 일이 아니라는 것을 놓치지 않는 한. 다음과 같이

내 레이아웃, 그리고 내가 페이지 상단 떨어져 사라지는하지하고자하는 header-top 및 header-nave - 그것은 심지어 경우

가

<header> 
    <div id="header-top"></div> 
    <div id="header-middle"></div> 
    <div id="header-nav"></div> 
</header> 

아무도 여기에 대한 조언을, 또는 알고 있나요을 CSS로 가능합니까? 어느 쪽이든, 튜토리얼이나 튜토리얼에 대한 포인터가 도움이 될 것입니다.

필요한 경우 JS에 개방되어 있습니다. 감사.

Answer 1

감사합니다, 여기에 내가 할 찾고 정확히 acheives JS이다.

$(function(){ 

    var top = $('#header-top-full-width'); 
    var nav = $('#header-nav-full-width'); 

    $(window).scroll(function(){ 

     if($(window).scrollTop() >= 90){ 
      border_bottom('0'); 
     } else if($(window).scrollTop() === 89){ 
      border_bottom('1'); 
     } else if($(window).scrollTop() === 88){ 
      border_bottom('2'); 
     } else if($(window).scrollTop() <= 87){ 
      border_bottom('3'); 
     } 

     if($(window).scrollTop() >= 90){ // To far, the navigation needs to be set in place 
      nav.css('position', 'fixed'); 
      nav.css('margin-top', '-90px'); 
      if($('#nav-spacer').length) { // Add a spacer so the height is correct if needs be 
      } else { 
       $('<div id="nav-spacer"></div>').insertAfter('#header-nav-full-width'); 
       $('#nav-spacer').css('height', '32px'); 
      } 
     } else { // The navigation needs to just be static, so remove the spacer and make it static 
      nav.css('position', 'static'); 
      nav.css('margin-top', '0'); 
      $('#nav-spacer').remove(); 
     }  
    }); 
}); 

Answer 2

이 작업을 수행하는 방법에 대한 데모가 많이 있습니다. 기본적으로 고정 된 위치 지정을 통해 탐색을 "끈적 거리게"만들기 시작하는 창까지의 거리를 파악해야합니다.

가 여기에 좋은 데모에 대한 링크입니다 : 유용한 힌트 및 포인터 (@Wesley 테리와 @eZakto)에 http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/