jquery - 滚动时如何使固定的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/