jquery - 滚动到顶部时侧边栏消失

Question

我现在正在这个网站上工作，我让侧边栏一直跟随，直到我点击页脚。

DEMO SITE ID : 测试 PASS : 2015

我做得很好，但是当我滚动回到顶部(非常顶部)时，我的侧边栏会自动隐藏它。

当我向下滚动一点点或单击 F5 并刷新时，它会再次出现。

这是我用于此功能的 javascript。

$(function(){
var target = $("#subContainer");//select which element you want to follow
var footer = $("footer")//making sidebar stop at footer
var targetHeight = target.outerHeight(true);
var targetTop = target.offset().top;

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    if(scrollTop > targetTop){
        var footerTop = footer.offset().top;

        if(scrollTop + targetHeight > footerTop){
            customTopPosition = footerTop - (scrollTop + targetHeight)
            target.css({position: "fixed", top:  customTopPosition + "px"});
        }else{
            target.css({position: "fixed", top: "10px"});
        }
    }else{
        target.css({position: "static", top: "auto"});
    }
});

});

我该如何解决这个问题，以便在我向右向上滚动时显示边栏。

感谢您的宝贵时间!

Answer 1

代替:

target.css({position: "static", top: "auto"});

只需将顶部的 css 重置为 0px:

target.css({top: "0px"});

这是因为当我们第一次加载页面时，您在#subContainer 上的原始样式已经有了position: fixed。所以真正唯一改变的是最高排名值。

您应该能够通过仅更改顶部来进一步简化您的代码:

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    if(scrollTop > targetTop){
        var footerTop = footer.offset().top;

        if(scrollTop + targetHeight > footerTop){
            customTopPosition = footerTop - (scrollTop + targetHeight)
            target.css({top:  customTopPosition + "px"});
        }else{
            target.css({ top: "10px"});
        }
    }else{
        target.css({top: "0px"});
    }
});