One of the key learning curves for this project was the use of ‘Java script’, this is an area I am very interested in, and wanted to implement this into the ‘IVY Infant Clothier’ website. One thing I wanted to do which is discussed within the content plan, is that I wanted to create a sticky navigation that faded in when scrolling down, and then faded back out when scrolling back up the page.
I began by creating a secondary navigation, separate from the one located on the top of the hero section. This secondary navigation had to be separate from the main wrapper that goes around the full website, mainly because it may conflict with the css rules implemented for the sticky nav.
As you can see in this code taken from the ‘index.html’ file, that this navigation is set within 1 container named ‘main-nav’, and inside the container are standard anchor elements containing the links for each page. And also includes a smaller ‘png’ file of the main logo of IVY Infant Clothier, and then also a div which contains the full navigation but is only used for the Foundation ‘show-for-large’ attribute, which only makes this navigation appear on large screens.
Notice on the end of this containing div is another attribute titled ‘hideme’, this attribute is linked into a java script file which allows for this container, to fade.
Here is the CSS code that has styled the navigation, notice on the selector ‘.main-nav-scrolled’ I have assigned the div as ‘position: fixed;’ this means that on scroll the navigation will stick to the screen.
I have assigned for this div, considering its the main container that goes around the navigation a ‘z-index’ of 9000 which allows the navigation to move forward in front of the other content on the page.
Here is a gif demonstrating the sticky navigation working:
Notice how it fades in when the user scrolls down, and then fades back out when the user gets back to the top of the page.
(This navigation will only be used on large screens)