添加辅助导航粘

我在下面的模板工作：http://www.alessandrosantese.com/aldemair-productions/project.html 添加辅助导航粘

当我向上滚动，我想第二导航成为刚下头部固定。

，我有我的JS在红色添加和删除修复类二级导航：

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中的条件满足，辅助导航就会固定在标题下方。

哪里/我该如何改进？

来源

2016-05-07 Alex

第一tthings，你的主包装上（由于较高的z-index）你的头顶部，如果你想在这没有意义头衔下的seondary nav。同样在Firefox中，当悬停视频时，页面不会滚动。 – yezzz

@Alex如果我的答案有用，请将其标记为完成此问题的最佳答案。 – Mohammad

使用此代码首先

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

来源

2016-05-08 10:48:02 Mohammad

添加辅助导航粘

回答

相关问题