这是我的页脚代码。
<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>
我的问题是我希望我的页脚粘在页面底部,直到用户到达底部,然后显示其他内容。
仅借助 CSS,您就可以将其重新视为两个页脚,一个弹出,另一个无聊;)
[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;
}
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)