使用 jQuery 在可见窗口内保持滚动对象答案

【问题标题】：Using jQuery to keep scrolling object within visible window使用 jQuery 在可见窗口内保持滚动对象
【发布时间】：2011-03-11 13:25:54
【问题描述】：

当我意识到这个“提问”页面上的“如何提问/格式化”侧边栏框确实可以我想要什么。

基本上，它与屏幕的其余部分一致地上下滚动，并与主要部分保持顶部对齐，除非主要部分开始滚动到可见窗口的顶部。此时，侧边栏框停止滚动，并开始像绝对定位一样，靠在可见窗口的顶部。

我曾尝试在“询问”屏幕上深入研究源代码和脚本，但其中发生的事情太多了，这几乎是不可能的（至少对我而言）。我假设 jQuery 实际上使这种事情变得非常简单，但我是新手，所以我很难自己弄清楚。（如果这是一个常见问题，我深表歉意——我已经搜索了大约一个小时，但是有许多措辞严密的 jQuery 问题我无法解决挖掘答案。）

提前感谢您的帮助。

【问题讨论】：

标签： jquery scroll position bounding-box

【解决方案1】：

这是 Apple 在 Applestore 页面上的购物车示例。

逻辑：

检查粘性元素的位置
检查顶部窗口所在的滚动事件
添加或删除 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<scrollTop) $('#shopping-cart').addClass('fixed');  
   else $('#shopping-cart').removeClass('fixed');  
  });  
});

CSS：

.fixed {  
        position: fixed;   
        top: 20px;  
        margin-left: 720px;  
        background-color: #0f0 ! important; }

example Link

【讨论】：

这也是一种不错的巧妙方法。 +1
它不像 Dutchies 那样“弹跳”，但它的功能与“Ask”网站上的框完全一样。
如果您不需要“粘性”或“弹跳”效果，这实际上可能比我的方法更好。在某些情况下，我的方法可能会导致闪烁。见jsfiddle.net/Jaybles/C5yWu/4
同意。 Dutchie 的回答真的很有帮助，而且信息量很大，但是当我试图处理每次滚动增量重新定位 div 的“弹性”时，我最终研究了这种方法。非常感谢。
这就是我的想法，希望有一个仅 css 的解决方案，但似乎没有。我相信这个家伙的代码可能是你能做的最好的。

【解决方案2】：

这是一个小sn-p，我只是在滚动时将一个对象保持在屏幕上。

现场演示

http://jsfiddle.net/Jaybles/C5yWu/

HTML

<div id='object'>Top: 0px</div>

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');

});

更新示例（带有计时器 + 动画）

http://jsfiddle.net/Jaybles/C5yWu/2/

【讨论】：

哇！这正是我一直在寻找的——而且显然非常漂亮。非常感谢！
我很欣赏这些客气话。编码愉快！

【解决方案3】：

如果您需要将其保持在底部使用，就像这样 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

【讨论】：

【解决方案4】：

如果您只需要将 div 保存在浏览器的某个位置，则不需要 javascript，您可以使用 CSS 来做到这一点。

#chatt-box {
    right: 5px;
    height: auto;
    width: 300px;
    position: fixed;
    bottom: 0px;
}

【讨论】：