jquery - 阻止浮动 div 在页脚处滑动

Question

在问你我的问题之前，我一直在尝试并环顾四周。

我有一个浮动 div，我想停在一个特定的 div （实际上是页脚）。我知道页脚高度大小。

我尝试了很多在网络和 Stackoverflow 上找到的代码，但没有成功。我知道这个问题已经被问过无数次了。

这是页面： http ://www.autohd.fr/A/

到达页脚时必须停止的浮动 div 位于右侧“RÉAGIR”。

$(function() {

var $sidebar = $("#shout"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 20;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        });
    } else {
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
});
});

感谢您的时间和帮助，亚历克斯

Answer 1

只要确保那个 div 的底部没有通过 $("#footer").offset().top。您可以像这样计算当前 div 的底部$sidebar.offset().top + $sidebar.height()：例如：

$(function() {
   var $sidebar = $("#shout"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 20,
    footerTop = $("#footer").offset().top;  // <-- Get the footer's top

   $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: Math.min(
                          $window.scrollTop() - offset.top + topPadding,
                          footerTop - $sidebar.height()
                       )
        });
    } else {  
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
   });
});