带有底部导航的粘性滚动导航

Question

我的项目基于已经存在的代码，所以总的来说应该不难。我想。

这是我所依据的示例：Sticky Scroll

    function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

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

我已经有了与导航栏配合使用的脚本。唯一的问题是我的导航栏位于主页的底部。它应该一直留在那里，直到滚动时触及顶部。

我目前拥有的是：testpage

现在，当您第一次查看我的页面时，最后一个状态就像我想要的那样。我尝试了几件事并让代码工作但没有我的导航位于底部，我无法开始工作。

我的猜测是我必须更改 Jquery 脚本中的某些内容。

我的目标是获得类似西雅图苹果酒公司导航的东西，但主页应该在底部有导航。（没有链接，因为我是新来的）（也搜索了论坛的如果他们有任何解决方案但没有'找不到能解决我的问题）

Answer 1

将您的导航移动到出现的第一部分下方，并使用 JQuery 为该部分指定窗口高度。然后只需应用您的粘性菜单代码，它应该可以正常工作。

See this Fiddle

(function() {
    //set the height of your section which makes sticky sit below it
    // windowHeight alone will push it outside the window so do
    //window height - whatever height your nav is
    var winHeight = $(window).height(); 
    $('section').css('height', winHeight - 60 + 'px');


    //Your sticky relocate code    
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            $('#sticky').addClass('stick');
        } else {
            $('#sticky').removeClass('stick');
        }
    }

     $(window).scroll(sticky_relocate);


})();