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

这是我的页脚代码

<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>

始终显示在底部的部分
仅当用户到达页面底部时显示

---

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

这里有一个简单的脚本来跟踪滚动位置并将其与高度进行比较。滚动到底部时，满足该条件。在这一点上，你可以做你想做的：）

---

这里需要一点Javascript。下面的代码应该可以工作

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

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

---

我假设你已经有了CSS，可以让页脚粘在页面底部（

位置：fixed；bottom=0；

），在这种情况下，你可以替换任何代码来隐藏中间页脚，并在用户滚动到底部时显示任何你想显示的内容。

只需要CSS的帮助，你可以把它重新考虑为两个页脚，一个弹出，另一个无聊；）

[id^=foo]{
背景：橙色；
填充物：5px；
字体大小：25px；
}
#无聊的{
位置：固定；
底部：0；
右：0；
左：0；
}
#福波{
位置：绝对位置；
高度：70像素；
右：0；左：0；
}

向下滚动我
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
很多内容那里。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
很多内容。
那里有很多内容。
很多内容那里。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
那里有很多内容。
结束。
砰！1.1.1.11!
枯燥的页脚。

纯css无法实现。您必须使用javascript或jquery。您是使用jquery还是更喜欢纯javascript解决方案？我现在正在使用javascript。我在想怎么做。你能给我一个关于这个的链接或建议吗？我现在正在使用javascript。我在想怎么做。你能给我一个链接或建议吗？为什么在一行中有两个

col-md-12

s？@McGyverBasaya当然，你只需要在满足条件时更改你想要显示/隐藏的内容的显示属性。可能还想添加一个else条件，在向上滚动aw04时将内容更改回我需要的某些部分，但是有可能根据上面的代码修复第一个柱基的位置吗？正如我上面的问题，我只想显示第一列，然后在用户到达页面底部时显示第二列。。这可能吗？这只在内容大于视口高度时有效，对吗？@Beren如果内容大于视口，它已经像“滚动”到底部一样，对吗？：）任何粘贴的页脚都会发生这种情况。@nicael，但它没有缝合到底部页脚。@Berend哦，对不起！很快就可以了（现在有点忙）。@Berend-Hm，我已经提供了一个解决方案来获取弹出页脚的百分比高度，尽管这无论如何都不需要，因为如果你打算使用这个模型，你肯定会制作一个更大的页面（例如，我的页面太小）。

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

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