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

问题描述

我正在写一篇关于我想要做的事情的长描述时，当我意识到同一个提问"页面上的如何提问/格式化"侧边栏框确实我想要的.

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

我曾尝试在这个询问"屏幕上深入研究源代码和脚本，但是发生的事情太多了，这几乎是不可能的(至少对我来说).我假设 jQuery 实际上让这种事情变得非常简单，但我是新手，所以我很难自己弄清楚.(如果这是一个常见的问题，我很抱歉——我已经搜索了大约一个小时，但是有很多措辞严密的 jQuery 问题我没能解决找出答案.)

在此先感谢您的帮助.

解决方案

这里是我在滚动时在屏幕上保留一个对象的一个​​小片段.

现场演示

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

HTML

顶部:0px</div>

CSS

#object{height:200px;宽度:200px；背景:#f00；位置:绝对；顶部:0；左: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) 

更新示例(带定时器 + 动画)

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

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.)

Thanks in advance for any help.

解决方案

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)

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

这篇关于使用 jQuery 在可见窗口内保持滚动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！