当它到达页脚时取消粘附 div

Question

我有一个div 粘在屏幕底部，一旦它到达页脚就想解开它。我让它粘住，但一旦它向下滚动到页脚，它就不会解开。

var scrollTop = $(document).scrollTop();
var div = $('.floating-div');
var footer = $(document).outerHeight() - $('#footer').outerHeight() - div.outerHeight();

function stickyDiv() {

    if (scrollTop < footer) {
        div.addClass("sticky");
    }if (scrollTop >= footer) {
        div.removeClass("sticky");
        div.css({
            position: "absolute",
            top: footer + "px"
        });
    }
}

$(document).scroll(function () {
    stickyDiv();
});

这是我的小提琴

Answer 1

我建议您不要使用相同的元素，而是克隆页脚并在那里添加新的css类。这样，当您将 css position从固定更改为相对或静态时，您将避免内容及时跳跃，反之亦然。它也适用于响应式设计，因为您有更多的控制权：

var realFooter = $('.floating');
var floatingFooter = realFooter.clone().addClass('floating-div').appendTo( $('body') );
function stickyDiv() {
    var scrollTop = $(window).scrollTop();
    var winHeight = $(window).height();
    var footerOffsetTop = realFooter.offset().top;
    if ((scrollTop+winHeight) > footerOffsetTop) {
        floatingFooter.fadeOut('fast');
    } else {
        floatingFooter.fadeIn('fast');
    }
}
$(document).scroll(function () {
    stickyDiv();
});

.sticky {
    position:fixed;
    bottom:10px;
    margin:0 auto;
    z-index:1000;
}
.floating {
    background: #ddd;
    height:100px;
}
.floating-div {
    background:#888;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
#top {
    height:900px;
}
#wrapper {
    height:1000px;
    background:#fff;
}
#footer {
    background:#ccc;
    height:100px;
    bottom:0px;
    position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="top"></div>
    <div class="floating">floating footer</div>
</div>
<div id="footer">footer</div>

小提琴上的相同脚本。

顺便说一下，原始脚本中有几个错误，例如：

在
• document上分配事件，而不是在window上分配事件
• 计算stickyDiv()之外的floatingFooter
• 页脚位置计算错误，应使用offset()

Answer 2

这个怎么样？

var div = $('.floating-div');
var winHeight = $(window).height();
var ftrOffsetTop = $('#footer').offset().top;
function stickyDiv() {
    var scrollTop = $(window).scrollTop();
    if ((winHeight + scrollTop) >= ftrOffsetTop) {
        div.is(".fixed") && div.removeClass("fixed");
    } else {
        div.is(":not(.fixed)") && div.addClass("fixed");
    }
}
$(document).scroll(function () {
    stickyDiv();
});

.sticky {
    position:fixed;
    bottom:10px;
    margin:0 auto;
    z-index:1000;
}
.floating-div {
    background:#888;
    height:100px;
    width: 100%;
}
.floating-div.fixed {
    position: fixed;
    bottom: 0;
}
#top {
    height:900px;
}
#wrapper {
    height:1000px;
    background:#fff;
}
#footer {
    background:#ccc;
    height:100px;
    bottom:0px;
    position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="top"></div>
    <div class="floating-div fixed">floating-div</div>
</div>
<div id="footer">footer</div>

Answer 3

var scrollTop = $(document).scrollTop();

这应该在函数内部声明，否则它将始终返回 0。

编辑：新的小提琴 https://jsfiddle.net/ce97999q/31/

它的工作原理是这样的，但有一种更简单的方法可以做到这一点。