首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何用jQuery让div跟随滚动顺畅?

如何用jQuery让div跟随滚动顺畅?
EN

Stack Overflow用户
提问于 2010-02-01 23:55:07
回答 7查看 158.2K关注 0票数 64

在我的容器中有部分/框,但是当其他框都看不到时,最后一个框应该跟随滚动。

因此,当用户向下滚动时,他会看到一个正常的侧边栏,但当用户向下滚动足够多时,侧边栏将结束,但屏幕顶部的最后一个框开始跟随。我在不同类型的网站上看到过很多这样的东西。

我目前的代码:

$(window).scroll(function(){
    $.each($('.follow-scroll'),function(){
        var eloffset = $(this).offset();
        var windowpos = $(window).scrollTop();
        if(windowpos<eloffset.top) {
            var finaldestination = 0;
        } else {
            var finaldestination = windowpos;
        }
        $(this).stop().animate({'top':finaldestination},200);
    });
});
EN

回答 7

Stack Overflow用户

发布于 2010-02-02 23:28:18

https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/上有一个很棒的关于这方面的jQuery教程。

它复制了侧边栏滚动的Apple.com购物车类型。Google查询可能对你有很好的帮助,那就是“固定浮动侧边栏”。

票数 52
EN

Stack Overflow用户

发布于 2011-09-21 00:00:08

解决方案可以归结为:

var el=$('#follow-scroll');
var elpos=el.offset().top;
$(window).scroll(function () {
    var y=$(this).scrollTop();
    if(y<elpos){el.stop().animate({'top':0},500);}
    else{el.stop().animate({'top':y-elpos},500);}
});

我更改了el的赋值,因为按类查找单个元素不是一个很好的习惯;如果只想要一个元素按id查找,如果想迭代元素集合,就按类查找它们。

请注意-我的答案指的是当时被接受的答案(目前它仍然是被接受的答案,但后来被编辑了,因此我的答案不再是你在这个页面上@Martti Lane的答案中看到的内容;我的答案是他最初被接受的答案;如果你对我的“总结”感兴趣,你可以看看@Martti的答案的编辑历史。)

票数 19
EN

Stack Overflow用户

发布于 2012-07-24 16:18:49

这是我的最终代码...(基于之前的修复,感谢您花大量时间进行headstart,节省了大量的实验时间)。让我头疼的是向上滚动和向下滚动... :)

它总是让我想知道jquery是如何优雅的!

$(document).ready(function(){

    //run once
    var el=$('#scrolldiv');
    var originalelpos=el.offset().top; // take it where it originally is on the page

    //run on scroll
     $(window).scroll(function(){
        var el = $('#scrolldiv'); // important! (local)
        var elpos = el.offset().top; // take current situation
        var windowpos = $(window).scrollTop();
        var finaldestination = windowpos+originalelpos;
        el.stop().animate({'top':finaldestination},500);
     });

});
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2177983

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档