主要内容后面的粘滞页脚,滚动可见
Mik*_*ike 4 html css footer sticky-footer twitter-bootstrap-4
我想重新创建这个在http://www.akc.org/dog-breeds/上发现的粘性效应.
- 我知道页脚必须修复.
- 我知道内容需要更高
z-index - 我猜(有点)身体需要有一个
margin-bottom等于页脚高度的???
请有人帮助我.
我正在使用Twitter Bootstrap 4.一般标记如下所示:
<body>
<div class="container"> <!-- This part should scroll up to reveal the footer below -->
<!-- Content goes in here -->
</div>
<footer class="footer"> <!-- This should be hidden initially -->
<div class="container">
<div class="row">
<!-- Footer stuff goes in here -->
</div>
</div>
</footer>
</body>
你会想要添加一个主内容div,然后给这个div一个你想要你的页面的背景颜色,否则你最终会有文本重叠但是你是对的你会想要给你的主要内容div一个z -index为1或者其他什么然后修改你的页脚,然后给它一个小于我示例中的z-index,我给它一个z-index为-1.然后,您的主要内容div将滚动页脚顶部.你可能想要给你的页脚一个高度,你的身体是一个相同高度的填充底部.
这是我如何做Fiddle演示的一个例子:
HTML:
<div class="main-content">
<div class="container">
<div class="row">
Your main Content Scroll down
</div>
</div>
</div>
<footer>
<div Class="container">
<div CLass="row">
Footer Content
</div>
</div>
</footer>
CSS:
body{
padding-bottom:200px;
}
.main-content{
min-height:200vh;
background:#fff;
z-index:1;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
background:#000;
color:#fff;
z-index:-1;
}