All geek questions in one place

Sticky footer behind main content visible on scroll

I would like to re-create this effect reveals the sticky footer found in http://www.akc.org/dog-breeds/

help

  • I know the footer needs to be fixed.
  • I know that content should have a higher z-index
  • I assume (kind of) that the body should have margin-bottomequal footer heights

Please help me.

I am using Twitter Bootstrap 4. The general markup is as follows:

<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>
+4
source share
1 answer

div, div , , , , , , div a z-index 1 -, z , , z- -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;
}
+3

Source: https://habr.com/ru/post/1648443/

More articles:


All Articles