使用jQuery浮动侧边栏 [英] Floating sidebar with jQuery

问题描述

我正在尝试为浮动侧边栏编写一些代码。
这意味着，当侧栏 offset.top 值达到一定距离时，它会转到 positon：fixed 。

I am trying to write some code for a floating sidebar. What that means is, when the sidebar offset.top value reaches a certain distance, it turns to positon: fixed.

我创建了一个带有demo的jsFiddle，这是全屏链接： http://jsfiddle.net/peduarte/Qcftp/show

I have created a jsFiddle with a demo, this is the full screen link: http://jsfiddle.net/peduarte/Qcftp/show

这里是代码的链接： http://jsfiddle.net/peduarte/Qcftp/

所以目前，情况正常。但我已经让页脚真的很大（故意），而现在，我正在尝试做的是计算 offset.bottom 。但令我惊讶的是，没有这样的事情。

So at the moment, things are working just fine. But I have made the footer really big (on purpose) and now, what I'm trying to do is calculate the offset.bottom. But for my surprise, there is no such thing.

我该怎么做？

如果你看在演示中，您会看到侧边栏与页脚重叠。

If you look at the demo you'll see that the sidebar overlaps the footer.

我需要删除位置：固定时它已经接近......

I need to remove position: fixed when it's getting close...

提前致谢。

推荐答案

如果您希望侧边栏在到达页脚时停止，您可以检查侧边栏的当前位置+侧边栏的高度是否大于页脚顶部：

If you want the sidebar to stop when it reaches the footer you can check if the current position of the sidebar + the height of the sidebar is greater than the top of the footer:

($("aside").position().top + $("aside").outerHeight() > $("footer").position().top) {
   // handle situation
}

这篇关于使用jQuery浮动侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！