Open Tongre001 opened 5 years ago
Hey @Tongre001, let me see if I have this right, you want to keep the nav bar where it is when you first load your page, but once you scroll down you want the nav to follow along with the page?
We can accomplish this by doing two things, making some javascript to trigger when the page hits a certain point of our screen, past where the navbar sits currently. And then a CSS class that will be added when it is triggered.
.navbar-fixed {
margin:0; /* so there is no gaps between your nav and the edges of the page */
left:0;
z-index: 99999; /* this is to make sure it's the most prevalent ''layer'' it will be the front most element */
position: fixed; /* your original thinking was correct! */
top: 200px; /* putting it this high kind of animates it, falling down */
width:100vw; /* you can use 100% but I like 100vw which displays as the full view width */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I need help making the navigation bar be sticky. I know I can use 'fixed' position, but if I did that it would stay at the top of the screen. I think the best way to do it is with JavaScript, however, I don't really know how to write the code for it. Could someone help me either write it for index.html? Afterwords. I got it from there.