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


})();

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

1 个答案: