Friday, 24 May 2013

Using jQuery for my Sticky Nav

As I thankfully had the time to, I decided to try and implement a 'sticky' navigation bar using jQuery. The way it works is reading the scroll position on the page and when it reaches the point where the navigation is at the top of the page, it changes the position of the navigation element to 'fixed'. It is also assigned a z-index which allows the content to slide underneath it. To prevent the content from jumping up to the top of the page when this happens padding equal to the height of the elements that become fixed added to the top of the content wrapper.


The added z-index is also helpful in keeping the drop-down part of the responsive navigation above the main content of the page.