Self Initiated: Java Script “Sticky Navigation”

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.

HTML

stickynav

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.

CSS

navscrolly

  • .main-nav-scrolled
    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.
  • .main-nav
    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.

Java Script

stickyjava

Here is the java script file for the sticky navigation, as you can see on the bottom section the container ‘main-nav’ is selected in two separate sections, one has a rule that say’s ‘.fadein’ and the other ‘.fadeout’, this basically means that on scroll ‘main-nav’ fades in and out. Above that section you can change when the nav fades in, dependent on the amount of pixels entered into the javascript. You can have it so when the user scrolls, it can take longer to fade in dependent on how many pixels the user has scrolled.

Here is a gif demonstrating the sticky navigation working:

scrollnav.gif

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)

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s