Help wanted to make navbar sticky

[Tongre001]

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.

[calvinmorett]

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.

1. To start, we can add the CSS class that will be added to the nav(when the jQuery tells it to) inside style.css

    .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 */
    }

2. Next, we will edit the HTML, first at the bottom of your closing tag, make sure we're giving the browser some code to reference to allow us to use jQuery inside the page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3. Finally, at the bottom of our HTML, inside the Githubissues.
4. Githubissues is a development platform for aggregating issues.