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

Question

我正在撰写一篇关于我想要做的事情的长说明，但突然发现这个“提问”页面上的“如何提问/格式化”侧边栏框架恰好可以实现我想要的功能。

基本上，它会随着屏幕的滚动而向上和向下滚动，与主区域保持顶部对齐，除非主区域开始滚动到可见窗口的顶部。此时，侧边栏框将停止滚动，并开始表现得像绝对定位在可见窗口的顶部。

我已经试图深入挖掘“提问”页面的源代码和脚本，但是由于有太多东西需要处理，所以这几乎是不可能的（至少对我而言是这样）。我猜想使用jQuery可以很容易地实现这种功能，但我刚接触它，因此很难自己弄清楚。如果这种问题是常见的，那我很抱歉——我已经搜索了大约一个小时，但有很多与jQuery相关的问题都非常相似，我还没有找到答案。

非常感谢您提前的帮助。

- Laurent Stanevich

Answer 1

这是一个来自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; }

示例链接

- michelgotta

---

这也是一种不错、流畅的方式。+1 - Dutchie432

它不像荷兰人那样“弹跳”，但它确实能够像“Ask”网站上的框一样正常工作。 - michelgotta

如果您不需要“粘性”或“弹跳”效果，那么这种方法实际上可能比我的方法更好。在某些情况下，我的方法可能会导致闪烁。请参见http://jsfiddle.net/Jaybles/C5yWu/4/。 - Dutchie432

同意。Dutchie的回答非常有帮助，也很详细，但当我尝试处理每次滚动增量重新定位div的“弹性”时，最终采用了这种方法。非常感谢您。 - Laurent Stanevich

这是我心中所想，希望有一个仅基于CSS的解决方案，但似乎并没有。我相信这位大佬的代码可能是你能做到的最好的。 - GorillaApe

Answer 2

这是我刚刚编写的一小段代码，可以在页面滚动时将对象保持在屏幕上。

实时演示

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/

- Dutchie432

---

哇！这正是我正在寻找的——而且显然呈现得非常好。非常感谢！ - Laurent Stanevich

感谢你的赞美之词。祝你编程愉快！ - Dutchie432

Answer 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。

- Aylian Craspa

Answer 4

如果你只需要将div保持在浏览器的某个位置，你不需要使用JavaScript，可以使用CSS实现。

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

- Aylian Craspa