I'm currently in the process of creating a footer for my website. Even though it's positioned at the bottom, it seems to constantly appear on the screen, whether I'm browsing at the top, middle, or bottom of the page.
Goal: The aim is to keep the footer fixed at the bottom of the webpage and have it only visible when the actual bottom of the page is reached within the viewport.
Current Outcome: Unfortunately, the footer continues to be displayed on the screen regardless of whether the bottom of the page is visible in the viewport or not.
HTML:
<footer class="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation>">
<div class="container">
<div class="navbar-text pull-left">
<p>©: 2018 First-name Last-name</p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-linkedin-square fa-2x "></i></a>
<a href="#"><i class="fa fa-github-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter-square fa-2x"></i></a>
</div>
</div>
</div>
</footer>
A helpful comparison would be freezing panes in MS Excel. When you freeze the top row, it remains visible as you scroll down the sheet. However, I want to avoid this behavior but can't seem to figure out how.