스크롤에서 고정 요소의 맨 아래에 요소를 붙이시겠습니까?

Question

기본적으로 내가 달성하고자하는 것은 보조 네비게이션이 스크롤의 메인 네비게이션의 하단을 만나는 순간 메인 네비게이션의 하단에 붙는 것입니다. 나는 jQuery로 여전히 배우고 있으며, 머리를 찢기 시작했습니다!

편집 : 현실화 나는 지금까지 어디로 갔는지 설명하지 않았다. 클래스가 요소에 추가되지만 주 헤더 아래에서 수정하는 대신 뷰포트에서 벗어납니다.

편집 2 : 누군가가 도움/조언을 제공 할 수 있다면 JSFiddle

나는 그것이 너무 감사하겠습니다!

외부 헤더 높이 160 픽셀

표식은 다음과 같다 :

HTML

<div class="outer-header" id="header"> 
    <header> 
     ....  
    </header>   
</div> 
<div id="page-wrap"> 
    <div class="upper-content"> 
     ..... 
    </div> 
    <nav id="secondary_nav"> 
     .... 
    </nav> 

CSS

.sticky{ 
    position: fixed; 
    top: 206px; /*top of viewport + height of secondary nav and outer-header*/ 
} 

JS

var stickyNavTop = $('#secondary_nav').offset().top - 160; 

var stickyNav = function(){ 
    var scrollTop = $(window).scrollTop(); 

    if (scrollTop > stickyNavTop) { 
     $('#secondary_nav').addClass('sticky'); 
    } else { 
     $('#secondary_nav').removeClass('sticky'); 
    } 
}; 

stickyNav(); 

$(window).scroll(function() { 
    stickyNav(); 
}); 

,

Answer 1

귀하의 코드가 99 %입니다. 덮어 쓰지 않도록 클래스를 지정하면됩니다.

DEMO http://jsfiddle.net/H9Bz3/27/

#secondary_nav.sticky{ 
    position: fixed; 
    top: 160px; 
} 

업데이트 :

상단에서 높이를 보장하기 위해 올바른지 내가의 요소 높이에 따라 CSS를 할당 할 outter-header

DEMO http://jsfiddle.net/H9Bz3/28/

jQuery(document).ready(function($){ 
    //Sticky 
    var stickyNavTop = $('#secondary_nav').offset().top - 160; 
    var topHeight = $('.outer-header').outerHeight(); 

    var stickyNav = function(){ 
     var scrollTop = $(window).scrollTop(); 

     if (scrollTop >= stickyNavTop) { 
      $('#secondary_nav').css({ 
       'position': 'fixed', 
       'top': topHeight+'px' 
      }); 
     } else { 
      $('#secondary_nav').css({ 
       'position': 'relative', 
       'top': '0' 
      }); 
     } 
    }; 

    stickyNav(); 

    $(window).scroll(function() { 
     stickyNav(); 
    }); 
}); 

Answer 2

이 작동합니다 :

이

.sticky{ 
    position: fixed !important; 
    top: 160px; 
}