Question

我正在处理以下模板：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中的条件，辅助导航将固定在标题下方。

我在哪里/如何改进？

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>

添加辅助粘性导航

1 个答案: