Sticky Navigation

This was something I wanted to incorporate from the very beginning mainly because it was a technical piece of code that I wanted to learn myself. I wasn't sure how to do it. I'd seen examples of CSS transitions and complicated CSS rules which I thought could be something to try out. After a brief search online the best way to accomplish it was by using jQuery. This was something I was completely new to. Like I have previously mentioned I have dabbled with HTML and CSS but never with jQuery. I thought it would be a good thing to learn how to write because it's uses in web are near endless, it is incredibly powerful. I searched the web for code snippets to use however, none of them really worked. And so I resorted to writing it myself:

This is the code I ended up writing. Luckily jQuery uses fairly simple language and CSS ids/classes. The only thing that's complicated was the punctuation, grammar and order. Once you get your head around the language it is fairly straight foreword. 

I will explain what I wrote. The jQuery begins by defining two variables. The first is called "menuOffset". This is the top of my nav element which I calculated to be exactly 276px. The next is called "docScroll". This is an inbuilt automatic value that reads how far down the page you have scrolled and assigns a value to the top of the browser. So now I have two values; "menuOffset" (which is 276px) and "docScroll" (which is automatic and increases in size the more you scroll down the page). I then wrote out a little if/else rule. This basically compares the two variables and when the rule is triggered it performs a task. In my case I wanted to change the nav element so I made this in CSS:

This is a class applied to the existing id that I have in the HTML. The class isn't specified in the HTML and so is not applied however, I can apply it using jQuery at a set point in time. The point in time I chose was when the "docScroll >= menuOffset". That means when the value tied to the top of the browser is more than or equal to 276px. When this happens I made it so the class of fixed (which I specified in the jQuery) gets applied to my nav element. 

This however, created a huge problem. Doing this to the nav element pulled it out of the flow of the document because I added a z-index of 9999 to ensure that the nav element stayed at the top of everything and every other element scrolled beneath it. This means that all the content below the nav element tried to slam up and fill in the gap. This caused quite a jolt in the site. I explored many different avenues to fix the problem but eventually settled on this:

This is essentially the exact same code as before and so it will trigger an action at the exact same point in time however, this time the action is applied to the bottom of the logo element. I tried adding 85px worth of padding to the top of the content wrapper to compensate but that pushed the logo down with it to below the nav element when scrolling. This is what I specified in the CSS:

Adding padding to the bottom of the logo pushed it's surrounding box out making it so all the content was pushed down to compensate whilst not moving the logo. The result is completely seamless because both the events happen at the exact same time. This was quite challenging however, I am really happy that it works and I think it looks really sophisticated and professional.