3

Must stick to the bottom of the webpage, should not be visible until the user reaches the bottom of the page

For example

HTML

<footer>
    This is a footer.
</footer>

CSS

footer {
  padding: 10px;
  background-color: #999999;
  color: white;
  text-align: right;
  bottom: 0;
  width: 96.75%;
  position: fixed;
}

The problem is, it's still visible when the user hasn't reached the bottom of the page. I want it so it's not visible until they hit the bottom.

Sébastien
  • 11,860
  • 11
  • 58
  • 78

2 Answers2

1

You can use javascript ... 

window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
        document.getElementsByTagName("footer")[0].style.visibility = 'visible';
    }else{
 document.getElementsByTagName("footer")[0].style.visibility = 'hidden';
    }
};
body {
 position: relative;
 height:1000px; /*only for example to having scroll */ 

}
footer {
  visibility:hidden;
  padding: 10px;
  background-color: #999999;
  color: white;
  text-align: right;
  bottom: 0;
  width: 96.75%;
  position: fixed;
}
<footer> the footer</footer>
MTK
  • 3,300
  • 2
  • 33
  • 49
1

There are many techniques you can use, most do not involve JavaScript. Some rely on more modern CSS features not yet implemented in all browsers (like grid).

Here is a simple, fairly robust and cross browser example. It involves giving the body and HTML a 100% height and using negative margins.

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
footer.sticky {
  height: 50px;
  margin-top: -50px;
  background-color:#efefef;
}
<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="sticky">
  <p>some footer content</p>
  </footer>
</body>

With more content, the footer is pushed down

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
footer.sticky {
  height: 50px;
  margin-top: -50px;
  background-color:#efefef;
}
<body>
  <div class="content">
    <div class="content-inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <footer class="sticky">
  <p>some footer content</p>
  </footer>
</body>
Sébastien
  • 11,860
  • 11
  • 58
  • 78