javascript - 在 HTML 中实现 float 侧边栏,它在页眉和页脚的边界内保持可见

标签 javascript html css

我在 Stackoverflow 上看到了几个关于 float 或固定侧边栏的问题,但我找不到一个涵盖这种情况的问题。

以这个页面为例:http://msdn.microsoft.com/en-us/library/aa691131(v=vs.71).aspx

当页面向上滚动时,侧边栏也随之向上滚动,直到其顶部边缘碰到窗口的顶部。随着滚动的继续,侧边栏将保持固定在其位置,直到页脚向上移动并将侧边栏自身向上推。

因此,边栏总是被困在页眉和页脚之间,但在这个限制内,它会尽可能地保持可见。

这是通过使用 javascript 完成的。我想知道你们是否已经取得了类似的成就,或者你们是否知道可以在这里分享的解决方案。

谢谢。

最佳答案

这是关于如何通过 jQuery 实现此效果的精彩教程... http://www.hongkiat.com/blog/css-sticky-position/

它使用 jQuery .addClass() 在到达某个滚动位置时向元素添加一个类。

以及当用户向后滚动过去时相应的 .removeClass()

关于javascript - 在 HTML 中实现 float 侧边栏,它在页眉和页脚的边界内保持可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21411199/

相关文章:

javascript - 入门问题,在动画上用文本覆盖 Div

javascript - 如何为每个超链接检测某个 HREF

javascript - 在 React 中提交表单后重定向到 URL

javascript - 网站动态内容

css - 为什么不异步加载 CSS 文件解析 PageSpeed 的 ‘Defer unused CSS’ 条目?

css - 如何使静态 ionic 列表在 ionic 中可滚动?

javascript - 如何使用 jquery 将 dom 元素放入变量中?

html - Firefox 正在缩小内联 block div 中的表格。这里发生了什么?

javascript - 在 jquery 选择器中访问 div

html - css动画时间问题