jquery - Jquery Scrolling Div 将内容推离页面底部

Question

我试图在向下滚动页面后获得一个 div。它工作得很好，但是当我尝试滚动太远时，div 卡在页面底部：

$(function() {
    var $sidebar = $("#sidebar"),
        $bigPics = $("#bigPics"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 20,
        turnoff = 1;
    var documentHeight = $(document).height();

    $window.scroll(function() {
        if (($window.scrollTop() > offset.top) && (documentHeight - 1200 > parseFloat($sidebar.css("marginTop")))) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop();
        }
    });
});

当我向上滚动页面时，关于如何让它重新开始的任何想法？提前喝彩

Answer 1

我用过jquery插件

https://github.com/garand/sticky

停在底部：

（函数（$）{

var limit_bottom=$('#footer').height(); 
$('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});

})(jQuery);

Answer 2

利用：

$sidebar.css({'position':'absolute','top':0,'right':0});
var extraValue=0,sidebarHeight=$sidebar.height();
$window.scroll(function() {
    $sidebar.stop(true,true).animate({
       top: $window.scrollTop() + $window.height() - sidebarHeight + extraValue
    });
});

您可以通过使用 css 轻松实现此目的：

.sidebar{
position:fixed;
bottom:0;
right:0;
}

/* for browser not supporting fixed position as ie6 */
.oldBrowser .sidebar{
position:absolute;
top:expression( documentElement.scrollTop + body.scrollTop + yourExtraValue );
}

您需要确定何时存在旧浏览器并将类“.oldBrowser”添加到正文标记元素。您可以在文档准备好时在服务器端或客户端执行此操作。