1

我正在尝试创建一个 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/

任何帮助将不胜感激

4

2 回答 2

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

上述代码片段背后的逻辑非常简单：我们获取当前的 Y 偏移.top并将其存储在一个变量中。当窗口滚动时，我们检查 Y 偏移量与滚动的距离。如果窗口不滚动，则 的值$(window).scrollTop()本质上为 0，因此.top保持在父级中而没有改变；如果窗口滚动并且由 计算的滚动距离$(window).scrollTop()超过 的当前 Y 偏移量.top，则 CSS.top将被更改为将其“粘贴”到窗口顶部。

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

于 2013-04-03T04:10:30.100 回答
-2

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

更多信息：最佳 JQUERY 滚动到顶部插件

于 2013-04-03T03:53:22.037 回答