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();
});

Here's my fiddle

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>

Fiddle上的相同脚本。

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

在document上分配事件，而不是window
在floatingFooter

stickyDiv()

错误计算页脚位置，应使用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/

它的工作方式与此类似，但有一种更为简单的方法。

当它击中页脚时，取消它

3 个答案: