使用jQuery将滚动对象保持在可见窗口内 当我意识到“如何询问/格式化”边栏框在这个非常相似的“问一个问题”页面时，我正准备写下我想要做的事情。

基本上，它与屏幕的其余部分一起上下滚动，保持顶部与主要部分对齐，除非主要部分开始从可见窗口的顶部滚动。此时，侧边栏框停止滚动，并开始起作用，就好像它完全定位在可见窗口的顶部一样

我试着在这个“询问”屏幕上深入挖掘源代码和脚本，但是有太多的事情要做，这几乎是不可能的（至少对我来说）。我假设jQuery实际上使这类事情变得非常简单，但我是新手，所以我自己很难弄清楚。（如果这是一个常见的问题，我很抱歉——我已经搜索了大约一个小时，但是有太多措辞严密的jQuery问题，我一直无法找到答案。）

---

提前感谢您的帮助。

这是苹果在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');  
  });  
});  

---

这里有一个小片段，是我在滚动的时候为了在屏幕上保留一个对象而临时编出来的

现场演示

HTML

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

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

});

$(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);
});

$(document).scroll(function() {
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    $('#shopping-cart').css('top', windowScrollTop );

});

$（窗口）。滚动（函数（）{
var objectTop=$（'#object'）.position（）.top；
var objectHeight=$（'#object'）.outerHeight（）；
var windowscorltop=$（window.scrollTop（）；
var windowHeight=$（window.height（）；
如果（windowScrollTop>objectTop）
$（'#object'）.css（'top'，windowscorltop）；
否则如果（（windowScrollTop+windowHeight）<（objectTop+objectHeight））
$（'#object'）.css（'top'，（windowscorltop+windowHeight）-objectHeight）；
$（'#object'）.html（'Top:'+$（'#object'）.position（）.Top+'px'）；
});

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

---

如果您需要将其保持在底部，请按此使用 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');

});

$(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);
});

$(document).scroll(function() {
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    $('#shopping-cart').css('top', windowScrollTop );

});

如果你需要把它放在上面，就这样用吧 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');

});

$(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);
});

$(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;
    bottom: 0px;
}

#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;
}

---

这也是一种很好的、巧妙的方法+1它不像Dutchies那样“跳跃”，但它确实像“询问”网站上的框一样。如果你不需要“粘性”或“跳跃”效果，这实际上可能比我的方法更好。在某些情况下，我的方法可能会导致闪烁。见“同意”。Dutchie的回答真的很有帮助，也很有启发性，但我最终研究了这种方法，当我试图处理每次滚动增量重新定位div的“弹性”时。非常感谢。这就是我的想法，希望有一个css唯一的解决方案，但似乎没有。我相信这家伙的代码可能是你能做的最好的。哇！这正是我想要的——而且显然表现得很好。非常感谢！我很感激你的好话。快乐编码！