Mid-page Sticky Nav in Drupal node

I was tasked with creating some anchor links - I'm going to refer to them as quick links in this article - and making them sticky on a long page in Drupal. The anchor links were to be placed below the header (and marquee) and were meant to become 'sticky' when the top of the quick links div reached the top of the browser window. All this had to stay within the existing theme's wrapper div as well. There was a lot of code samples online about making a header nav sticky, but I had to play with them to make them work for my not-header sticky nav.

It didn't end up taking that many lines of code and worked well on different screen sizes with the proper breakpoints.

Have a look at this jsfiddle

 

Article tags: