Question

在问你问题之前，我一直在试着看一下。

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

我在Web和Stackoverflow上尝试了很多代码但没有成功。我知道很多次都会问过这个问题。

到达页脚时必须停止的浮动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
        });
    }
   });
});

阻止浮动div在页脚滑动

1 个答案: