如何让固定div（粘性侧栏）在页脚到达时向上滚动

请帮助JS专家！我花了整天的时间在StackOverflow上尝试所有类似问题的各种解决方案 - 它们都不是我想要的。如何让固定div（粘性侧栏）在页脚到达时向上滚动

我有一个动态高度边栏，当用户向下滚动到边栏底部（页面内容通常比边栏更长）时，边栏会变得固定。这样，当用户不断阅读内容时，侧栏的下半部分保持可见。

问题是现在侧栏运行到页面底部的页脚中。由于侧栏比查看端口长，因此不能简单地变为相对位置：再次相对。它需要向上滚动页脚（还有一个动态高度，以增加复杂度）。

我做的图像（它不会让我张贴在这里，因为我如果我知道如何增加我的名声被定罪。）http://imgur.com/Wzb0LRu

我想发生的是找到一个语法正确的说法：

When scrollTop >= Height of Footer + 20px margin { 
    add CSS "bottom: <Height of Footer + 20px margin>" to SIDEBAR };

在此先感谢所有尝试帮助的人！

来源

2015-05-27 Pete

当然有人必须知道如何做到这一点？我不敢相信我已经提出过一个让所有人都难过的问题！ – Pete

有两种基本方法可以做到这一点：

正确方法：修复，这样滚动条的父被包含在事物的HTML，从报头的底部跨越到的顶部页脚。这样，一切都完成了。

代码：

<div id="header"> 
</div> 
<div id="main"> 
    <!-- possibly overflown stuff, maybe your fake scrollbar if you have one --> 
</div> 
<div id="footer"> 
</div>

如果你能完成这项工作，这将是最好的方式通过为止。

欠正确方法：我认为这唯一可能有由div或类似的可变大小滚动条。使用类似：

代码：

element-that-scrolls.addEventListener("scroll",function(e){ 
    // this condition may need some fiddling -- feel free to edit 
    if (element-that-scrolls.scrollTop > scrollable-height + pixel-height-of-footer - height-of-scrollbar - required-margin-btw-footer-and-scrollbar){ 
     /* adjust height of scrollbar until previous condition is == */ 
    } 
},false);

不幸的是我是我的手机上，并不能测试这些，但我评论，随意编辑。

有趣的事实我刚刚得知：由于降价错误，“code：”是必要的。 See more。

来源

2015-05-27 02:20:43

如何让固定div（粘性侧栏）在页脚到达时向上滚动

回答

相关问题