如何在滚动时固定 div JUMP？

Question

更新：这基本上是我想要的，但是 div 固定在底部 - http://www.wduffy.co.uk/blog/wp-content/demos/jquery-scrolling-element/

有很多教程和问题试图避免这种情况，这很烦人，因为当我试图找出如何实现它时，我所看到的就是这些。

最初，我有一个固定的 div，它在滚动时粘在屏幕底部。但我想让它更引人注目，方法是让它在滚动时停留在该位置，然后平滑地向下跳回到屏幕底部（如果向上滚动，则向上跳）。

我找到了这段代码，它做了正确的事情，但它的行为很奇怪，从页面下方约 2000 像素开始，然后随着向下滚动而增加。

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

默认情况下，div的CSS是：

#footerBar {
    position:absolute;
    width:100%;
    padding:1.25em 0;
    color:#fff;
    opacity:.99;
    border-top:3px solid #877874;
    background-color: #61504d;
    background-image: url(img/checkered-pattern.png);
    min-height:52px;
    box-shadow:0 0 1.5em rgba(0,0,0,0.5);
}

谁能帮忙写个JS代码让它贴在屏幕底部，但是滚动页面的时候又能平滑跳转？

http://jsfiddle.net/t1dLyyg7/

更新：

我找到了一些不同的代码，这似乎更接近我想要的。但是，它会跳转到 div 页面加载时的原始位置，而不是固定在屏幕底部。

我看不出如何调整动态 bottom 值，以便在滚动时始终保持在屏幕底部...

http://jsfiddle.net/svoa7cts/

Answer 1

删除初始的 bottom CSS 声明，使其成为 position:absolute 而不是 position:fixed 和运行下面的 JS:

http://jsfiddle.net/svoa7cts/2/

var ScrollTimer;
function fireScroll() {
    var $scrollingDiv = $("#footerBar");
    $scrollingDiv.animate({"top": ($(window).scrollTop() + $(window).height() - $scrollingDiv.outerHeight()) + "px"}, "slow" ); 
};

$(window).scroll(function(){
    ScrollTimer && clearTimeout(ScrollTimer);
    ScrollTimer = setTimeout(fireScroll, 100); // Make it only fire when you stop scrolling
});
fireScroll(); // fire immediately upon page load

你甚至可以给它一个初始值top:100%;，这样它就会从底部弹出：http://jsfiddle.net/svoa7cts/3/

如何在滚动时固定 div JUMP？

How can I make a fixed div JUMP when scrolling?

jquery

css

fixed