如何让div使用jQuery平滑滚动?

在我的容器有部分/框,但最后一个这些框应该跟随滚动时,其他框都不可见。

所以,当用户向下滚动时,他看到一个正常的边栏,但是当用户已经下降了,边栏终止,但最后一个框开始跟随在屏幕的顶部。我在不同类型的网站上看到过很多。

我的代码在这一刻:

$(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);
    });
});

解决方法

由于这个问题是得到了很多的意见,并在最投票的回答链接的教程似乎离线,我花时间来清理这个脚本。

看到它住在这里:JSFiddle

JavaScript:

(function($) {
    var element = $('.follow-scroll'),originalY = element.offset().top;

    // Space between element and top of screen (when scrolling)
    var topMargin = 20;

    // Should probably be set in CSS; but here just for emphasis
    element.css('position','relative');

    $(window).on('scroll',function(event) {
        var scrollTop = $(window).scrollTop();

        element.stop(false,false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        },300);
    });
})(jQuery);

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...