使用jQuery将滚动对象保持在可见窗口内
当我意识到这个“问一个问题”页面上的“如何询问/格式化”侧边栏框完全符合我的要求时，我正在写一篇关于我想做什么的详细描述。
基本上，它与屏幕的其余部分一起向上和向下滚动，与主要部分保持顶部对齐，除非主要部分开始滚动到可见窗口的顶部。 此时，侧边栏框停止滚动，并开始表现为绝对位于可见窗口的顶部。
我已经尝试在这个“询问”屏幕上挖掘源代码和脚本，但是有很多事情发生，这几乎是不可能的（对我来说，至少）。 我假设jQuery实际上使这种事情非常简单，但我是新手，所以我很难为自己搞清楚。 （如果这是一个常见的问题，我的道歉 – 我一直在寻找大约一个小时，但是有很多密切措辞的jQuery问题，我无法找到答案。）
在此先感谢您的帮助。
这是Apple在Applestore Page上购物的例子。
逻辑：
- 检查粘性元素的位置
- 检查顶部窗口所在的滚动事件
- 添加或删除粘性元素的CSS类
jQuery：
$(document).ready(function() { // check where the shoppingcart-div is var offset = $('#shopping-cart').offset(); $(window).scroll(function () { var scrollTop = $(window).scrollTop(); // check the visible top of the browser if (offset.top CSS：
.fixed { position: fixed; top: 20px; margin-left: 720px; background-color: #0f0 ! important; }
示例链接
这是一个小片段，我只是在滚动时将对象保持在屏幕上。
现场演示
http://jsfiddle.net/Jaybles/C5yWu/
HTML
Top: 0px
CSS
#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}
jQuery的
$(window).scroll(function(){ var objectTop = $('#object').position().top; var objectHeight = $('#object').outerHeight(); var windowScrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); if (windowScrollTop > objectTop) $('#object').css('top', windowScrollTop ); else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight)) $('#object').css('top', (windowScrollTop+windowHeight) - objectHeight); $('#object').html('Top: ' + $('#object').position().top + 'px'); });
更新示例（使用Timer + Animation）
如果你需要将它作为这个jQuery保持在底层使用
$(document).scroll(function() { var objectTop = $('#shopping-cart').position().top; var objectHeight = $('#shopping-cart').outerHeight(); var windowScrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); if((objectTop+objectHeight) <= $('html').outerHeight()) $('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight); else $('#'+cont).css('top', $('html').outerHeight()- objectHeight); });
CSS
#shopping-cart{ width: 100%; height: 50px; position: absolute; left: 0px; bottom: 0px; }
如果你需要保持最佳使用作为这个jquery
$(document).scroll(function() { var objectHeight = $('#shopping-cart').outerHeight(); var windowScrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); $('#shopping-cart').css('top', windowScrollTop ); });
CSS
#shopping-cart{ width: 100%; height: 50px; position: absolute; left: 0px; top: 0px; }
它会做出魔法并且不要忘记保持你的风格与位置，有一点它不适用于Internet Explorer 8.0.7
如果您只需要在浏览器的某个位置保存div，则不需要javascript，您可以使用CSS执行此操作。
#chatt-box { right: 5px; height: auto; width: 300px; position: fixed; bottom: 0px; }