は二スティッキーナビゲーション

Question

を追加し、私は以下のテンプレートに取り組んでいます：私は上にスクロールするとhttp://www.alessandrosantese.com/aldemair-productions/project.html

私はちょうどヘッダーの下に固定になるための二次NAVをしたいと思います。

if($(".project-page").length) { 
    //var fixedNav = new Foundation.Sticky($('.sticky')); 

    $(".inner-inner-wrap").on('scroll', function() { 
     wrapper = $('.main-wrapper'); 
     offset = wrapper.offset(); 
     wrapperViewportOffsetTop = offset.top - $(document).scrollTop(); 
     console.log(wrapperViewportOffsetTop); 

     if(wrapperViewportOffsetTop <= 150) { 
      //$('.main-wrapper').addClass('fixed-wrapper'); 
      $('.project-nav').addClass('fixed-nav'); 
     } 
     else { 
      //$('.main-wrapper').removeClass('fixed-wrapper'); 
      $('.project-nav').removeClass('fixed-nav'); 
     } 
    }); 
    var viewPortHeight = $(window).height(); 

    // $('.project-nav').css('margin-top', viewPortHeight); 
    // $('.main-wrapper').css('margin-top', '-90px'); 
} 

結果は非常に良いではありません。

は、私は赤で二ナビゲーションのための追加や修正のクラスを削除するには、私のjsファイルを持っています。 JSの条件が満たされると、セカンダリナビがヘッダーの下に固定されることが期待されます。

どのように改善することができますか？

Answer 1

使用

$(window).scroll(function(e){ 
 
    var scrollTop = $("body").scrollTop(); 
 
    var headerHeight = $("header").height(); 
 
    var navHeight = $("nav").height(); 
 

 
    if (scrollTop <= headerHeight) 
 
     $("nav").css("top", headerHeight - scrollTop); 
 
    else 
 
     $("nav").css("top", "0px"); 
 
});

body { 
 
    position: relative; 
 
} 
 

 
header { 
 
    height: 100px; 
 
    background: #03A9F4; 
 
} 
 

 
nav { 
 
    height: 50px; 
 
    position: fixed; 
 
    top: 100px; 
 
    left: 8px; 
 
    right: 8px; 
 
    background: #FFC107;  
 
} 
 

 
div { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header></header> 
 
<nav></nav> 
 
<div></div>