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

Question

我正在写一篇关于我想做什么的详细描述，当我意识到这个“提问题”页面上的“如何询问/格式化”侧栏框确实 我想要的。

基本上，它与屏幕的其余部分一起向上和向下滚动，与主要部分保持顶部对齐，除非主要部分开始滚动到可见窗口的顶部。此时，侧边栏框停止滚动，并开始表现为绝对位于可见窗口的顶部。

我已经尝试在这个“询问”屏幕上挖掘源代码和脚本，但是有很多事情发生，这几乎是不可能的（对我来说，至少）。我假设jQuery实际上使这种事情非常简单，但我是新手，所以我很难为自己搞清楚。 （如果这是一个常见的问题，我的道歉 - 我一直在寻找大约一个小时，但有所以许多密切关注的jQuery问题，我一直无法做到找出答案。）

提前感谢您的帮助。

Answer 1

这是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<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

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/

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

Answer 4

如果您只需要在浏览器的某个位置保存div，则不需要javascript就可以使用CSS。

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