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

I was in the middle of writing up a long description of what I wanted to do, when I realized that the "How To Ask / Format" sidebar box on this very same "Ask A Question" page does exactly what I want.

当我意识到这个“问一个问题”页面上的“如何询问/格式化”侧边栏框完全符合我的要求时,我正在写一篇关于我想做什么的详细描述。

Basically, it scrolls up and down in unison with the rest of the screen, staying top-aligned with the main section, unless the main section starts to scroll off the top of the visible window. At that point, the sidebar box stops scrolling, and starts to act as if its positioned absolutely, against the top of the visible window.

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

I've tried digging into source code and scripts on this "Ask" screen, but there's so much going on that it's pretty much impossible (for me, at least). I'm assuming that jQuery actually makes this kind of thing pretty straightforward, but I'm new to it, so I'm having a hard time figuring it out for myself. (And if this turns out to be a common question, my apologies -- I've been searching for about an hour, but there are so many closely-worded jQuery questions that I haven't been able to dig up an answer.)

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

Thanks in advance for any help.

在此先感谢您的帮助。

4 个解决方案

#1

This is an example for a shoppingcart Apple has on the Applestore Page.

这是Apple在Applestore Page上购物的例子。

The logic:

• check where the sticky element is

检查粘性元素的位置

• check on the scroll event where the top window is

检查顶部窗口所在的滚动事件

• add or remove CSS class to the sticky element

添加或删除粘性元素的CSS类

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

The CSS:

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

example Link

#2

Here is a little snippet I just whipped up to keep an object on screen while scrolling.

这是一个小片段,我只是在滚动时将对象保持在屏幕上。

LIVE DEMO

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

});

UPDATED EXAMPLE (With Timer + Animation)

更新示例(使用Timer + Animation)

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

#3

if you need to keep it on bottom use as this jQuery

如果你需要将它作为这个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;
}

if you need to keep it on top use as this jquery

如果你需要保持最佳使用作为这个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;
}

it will do the magic and dont forget to keep your styles with the positions, and one thing its not work with internet explorer 8.0.7

它会做出魔法并且不要忘记保持你的风格与位置,有一点它不适用于Internet Explorer 8.0.7

#4

And if you only need to hold the div in a some place of the browser you don't need the javascript you can do that with CSS.

如果您只需要在浏览器的某个位置保存div,则不需要javascript,您可以使用CSS执行此操作。

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