Question

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

有许多关于试图避免这种情况的教程和问题，这很烦人，因为这是我在试图找出如何实现这一目标时所看到的全部内容。

最初，我有一个固定的div在滚动时粘在屏幕的底部。但是我希望通过在滚动时将其挂到位置然后顺利地跳回到屏幕底部（或向上，如果向上滚动）来使这更加明显。

我找到了这个代码，哪种做了正确的东西，但它的行为很奇怪，通过在页面下方大约2000px开始，然后随着向下滚动而增加。

//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？

1 个答案: