hinzufügen sekundäre sticky Navigation

Question

ich auf der folgende Vorlage arbeite: http://www.alessandrosantese.com/aldemair-productions/project.html

Wenn ich mich nach oben würde die sekundäre nav genau wie unter der Überschrift festgelegt werden.

und ich habe meine js die Update-Klasse für den sekundären nav in rot hinzuzufügen und zu entfernen:

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'); 
} 

Das Ergebnis ist nicht sehr gut. Ich erwarte, dass das sekundäre Nav unterhalb der Kopfzeile repariert wird, sobald die Bedingung in der JS erfüllt ist.

Wo/wie kann ich das verbessern?

Answer 1

Mit diesem Code

$(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>