Question

我想在http://www.akc.org/dog-breeds/

重新创建这种显露的粘性效应

help

我知道页脚必须修复。
我知道内容需要更高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>

Answer 1

你会想要添加一个主内容div，然后给这个div一个你想要你的页面的背景颜色，否则你最终会有文字重叠但是你是对的你会想要给你的主要内容将一个z-index除以1或者其他东西，然后将你的页脚固定在它后面并给它一个小于我示例中的z-index，我给它一个z-index为-1。然后，您的主要内容div将滚动页脚顶部。你可能想要给你的页脚一个高度，你的身体是一个相同高度的填充底部。

以下是我如何执行此操作的示例Fiddle Demo：

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

主要内容后面的粘滞页脚，滚动可见

1 个答案: