Question

这是我的页脚代码。

<div class="row">
    <div class="col-md-12">
        <div> the part that always showing at the bottom  </div>
    </div>
    <div class="col-md-12">
        <div> show only if the user reaching the bottom of the page </div>
    </div>
</div>

我的问题是我希望我的页脚粘到页面底部，直到用户到达底部，然后显示其他内容。

Answer 1

只有CSS的帮助，你可以重新考虑它作为两个页脚，一个弹出，另一个无聊;）

＆＃13;

[id^=foo]{
  background:orange;
  padding:5px;
  font-size:25px;
}

#foo-boring{
  position:fixed;
  bottom:0;
  right:0;
  left:0;
}
#foo-pop{
  position:absolute;
  height:70px;
  right:0; left:0;
}

＆＃13;

<div>SCROLL ME DOWN<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br> END.</div>
<div id="foo-pop"><b>POP!1!!!1!!1!11!</b></div>
<div id="foo-boring">The boring footer.</div>

＆＃13;

Answer 2

这里需要一些Javascript。下面的代码应该有效。

$(document).ready(function() {
    $('#footer-final').hide()
});

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $('#footer-inter').hide()
        $('#footer-final').show()
    }
});

我假设您已经获得了CSS以使页脚粘贴到页面底部（position:fixed; bottom=0;），在这种情况下，您可以替换任何代码来隐藏中间页脚并在用户滚动到底部时显示您想要显示的任何内容。

Answer 3

这是一个简单的脚本，用于跟踪滚动位置并将其与高度进行比较。滚动到底部时会满足条件。那时你可以按照自己的意愿行事:)。

window.addEventListener('scroll', function () {
    console.log('scroll: ' + (window.innerHeight + window.scrollY));
    console.log('height: ' + document.body.offsetHeight);
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)      {
        console.log('here!');
    }
});

https://jsfiddle.net/jzrgmeqg/1

当用户滚动到页面底部时显示页脚

3 个答案: