javascript - How to make a sticky bottom navigation using CSS with Footer

I'm trying to make bottom navbar that is always visible. It should be floating to the bottom of the page. When you at the bottom of the page I should be able to see the bottom nav bar + the footer

Ive managed to make the bottom navbar visible using the following HTML and CSS.

<html>
<head>
<style>
.stickyBottomNav {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<!-- Always visible Sticky Bottom Nav-->
<div class="stickyBottomNav">
  <p>Bottom Nav</p>
</div>

<!-- Only visible when your at the bottom of the page-->
<div class="footer">
  <p>footer</p>
</div>

</body>
</html>

I'm not sure how to make the bottom navbar and footer visible when your at the bottom of the page

I'm trying to make bottom navbar that is always visible. It should be floating to the bottom of the page. When you at the bottom of the page I should be able to see the bottom nav bar + the footer

Ive managed to make the bottom navbar visible using the following HTML and CSS.

<html>
<head>
<style>
.stickyBottomNav {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<!-- Always visible Sticky Bottom Nav-->
<div class="stickyBottomNav">
  <p>Bottom Nav</p>
</div>

<!-- Only visible when your at the bottom of the page-->
<div class="footer">
  <p>footer</p>
</div>

</body>
</html>

I'm not sure how to make the bottom navbar and footer visible when your at the bottom of the page

Share Improve this question edited Jan 14, 2021 at 0:34 asked Jan 14, 2021 at 0:08 breaktop 2,0296 gold badges42 silver badges63 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You can try something like this. Basically use position: absolute to keep the footer at the bottom of the content, and position: fixed to keep it at the bottom of the screen with the body as position: relative. Then all you have to do is a bit of spacing.

html, body {
  /* When there is not enough content */
  min-height: calc(100vh - 100px);
  margin: 0px
}

body {
  position: relative;
  /* Sum of heights for footer and nav */
  padding-bottom: 100px;
}

h2 {
  /* Keep it from pushing the body down */
  margin-top: 0px;
  padding-top: 16px;
}

.footer {
  position: absolute;
  
  /* Place above nav */
  bottom: 50px;
  left: 0px;
  
  height: 50px;
  width: 100%;
    
  background-color: blue;
  color: white;
  text-align: center;
}

.stickyBottomNav {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   z-index: 5;
   background-color: red;
   color: white;
   text-align: center;
}

<body>
<h2>Fixed/Sticky Footer Example</h2>

<h4>Lots of content</h4>
<p>Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet.
Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet.
Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet.
Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet.

</p>
<h3>End of content</h3>


<!-- Always visible Sticky Bottom Nav-->
<div class="stickyBottomNav">
  <p>Bottom Nav</p>
</div>

<!-- Only visible when your at the bottom of the page-->
<div class="footer">
  <p>footer</p>
</div>
</body>

Below is an example of the layout that makes your nav sticks to the bottom. Suggest you to view it in full screen mode otherwise part of the example will be blocked by the frame.

The concept is:

Make the html and body full height and full width.
Put your nav below main and make the main to expand and fill the rest of the screen.
Main your main scrollable so all contents and footer inside it will not affect the nav.

html {
  height: 100%;
  margin: 0;
  width: 100%;
}

body {
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  width: 340px;
}

main {
  background-color: #999;
  height: calc(100% - 50px);
  overflow-y: auto;
}

.container {
  background-color: #fff;
  min-height: calc(100% - 100px);
}

footer {
  background-color: #f0891a;
  color: #fff;
  height: 100px;
}

nav {
  background-color: #333;
  box-shadow: 0 -5px 10px 0 rgba(0,0,0,.1);
  color: #fff;
  height: 50px;
}

<body>
  <main>
    <div class="container">
      <ul>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
        <li>sample list</li>
      </ul>
    </div>
    <footer>
    Footer here
    </footer>
  </main>
  <nav>bottom nav here</nav>
</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to make a sticky bottom navigation using CSS with Footer - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)