侧栏会在滚动到顶部时消失

我现在正在此站点上工作，在那里我做了侧栏，直到找到页脚。侧栏会在滚动到顶部时消失

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

}）;

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

谢谢你的时间！

来源

2015-09-26 Hirohito Yamada

你有任何的代码？ – KeepMove

@SoursopTree是的，我添加了上面的代码，谢谢！ –

我很抱歉，我的意思是使用以下方法将其样式恢复为默认值：'target.removeAttr（“style”）;' – KeepMove

相反的：

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

来源

2015-09-26 05:28:59

感谢您的进一步指导！我决定简化SoursopTree为您提供的代码！ –

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

更换你的代码上面这样的：

$(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 
    } 
}); 

});

来源

2015-09-26 05:27:34 KeepMove

感谢您的帮助！非常快速的反应，正是我需要的！ –

侧栏会在滚动到顶部时消失

回答

相关问题