滚动到顶部时侧边栏消失

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

您只需要在页面滚动到达页面顶部时将其样式恢复为默认样式即可。这个方案可以用来解决那种情况下的问题。

将上面的代码替换为：

$(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.removeAttr("style"); // change is made here
    }
});

});

Answer 2

而不是：

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

滚动到顶部时侧边栏消失

Sidebar disappears when scrolled to top

css

jquery

sidebar

scrolltop