Question

我正在尝试创建一个jquery滚动函数。它目前很好地使用窗口，但我想保持它在div的约束下，所以它不能低于或高于div。

示例：

var $scrollingDiv = $("span.top");
    $(window).scroll(function(){            
        $scrollingDiv
            .stop()
            .animate({"top": ($(window).scrollTop() + 0) + "px"}, "slow" );
    });

HTML

<div class="holder">
<span class="top">back to top</span>
<p>loads of text here</p>

http://jsfiddle.net/Jzz76/

感谢任何帮助

Answer 1

首先，将CSS更改为以下内容：

.holder span.top{
    display:block;
    z-index:999;
    right:0;
    float:right;
}

如果您注意到，我从上述声明中删除了position:absolute和top:0。这样做是为了使元素仍然驻留在文档流中，并且不会超出它的父元素。为了使其走向极右，我只是添加了float:right。

接下来，将您的jQuery更改为：

$('document').ready(function(){
    var spanOffset = $('.top').offset();
    $(window).scroll(function() {
        if($(window).scrollTop() < spanOffset.top) {
            $('.top').css({ 'position': 'static'}); 
        } else {
            $('.top').css({ 'position': 'fixed', 'top': '0px'}); 
        }   
    });
});

上面代码片段背后的逻辑很简单：我们得到.top的当前Y偏移并将其存储在变量中。当窗口滚动时，我们检查Y偏移量与滚动的距离量。如果窗口没有滚动，则$(window).scrollTop()的值基本上为0，因此.top保留在父窗口内而不进行任何更改;如果窗口滚动并且$(window).scrollTop()计算的滚动距离超过.top的当前Y偏移量，则.top的CSS将被更改为“粘贴”到窗口顶部

有关工作示例，请参阅http://jsfiddle.net/Jzz76/20/。

Answer 2

我建议使用插件 - 为您完成的所有辛苦工作！看看像这样的轻量级插件：jQuery Scroll To

更多信息：BEST JQUERY SCROLL TO TOP PLUGINS

在div范围内的jquery animate滚动顶部

2 个答案: