Lab 37 Reflection

     Lab 37 was about creating a webpage with a top nav that would stay at the top when scrolling. In my HTML, I set up a navigation bar by first setting up <nav> tags and putting a <ul> with multiple <li> in between the <nav> tags. I created a div that had sample text and shifted focus to the JS. I created a function, fixNav(), that stored the nav itself and its top offset in separate variables. Using an if statement, it checked whether or not the top of the nav was past the top of the screen and if so, it would add a style I created in the CSS that set its position to fixed. This way the nav continued to be at the top of the screen as the user scrolled. On of the <li> in the nav was initially set to a 0 width but via this function, it was given a width, making it visible, under the same conditions that made the nav stick to the top. This function was added as an event listener to the window whenever the user scrolled.
     These skills are important for a web designer because they're one way of designing a good navigation. Many navs start out at the top of the webpage, some fixed to the top and other not. This style of nav doesn't need to start at the top yet it will stick to the top when the user scrolls to a certain point. In some website layout, like if there's a banner on top of a nav, this method of nav can be great for both achieving that layout while not sacrificing the convenience of a sticky nav by making the nav sticky after a certain point.