Question

请帮助JS专家！我花了一整天时间在StackOverflow上尝试所有各种类似问题的解决方案 - 它们都没有完全符合我的要求。

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

问题是现在侧边栏会进入页面底部的页脚。由于侧边栏比视口长，所以它不能简单地再次成为位置：相对。它需要向上滚动页脚（也有动态高度，以增加复杂性）。

我制作了一张图片（它不会让我在这里发帖，因为如果我知道如何提高我的声誉，我会被诅咒。）http://imgur.com/Wzb0LRu

我想要发现的是找到一种语法正确的说法：

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

提前感谢所有试图提供帮助的人！

Answer 1

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

正确方法：修复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);

不幸的是我在手机上无法测试这些，但正如我评论的那样，随时可以编辑。

我刚学到的有趣事实：由于降价错误，“代码：”是必要的。 See more

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

1 个答案: