Fixed menu after scrolling to a certain level. Position sticky CSS tricks!
Do you want the menu or any other element to change to position: fixed when user has scrolled to a certain level? This is how to create a fixed menu after scrolling to a certain level. Position sticky CSS tricks!
Fixed menu after scrolling to a certain level. CSS Position sticky:
if you want your menu to stick to a fixed position after scrolling to a certain level, follow these simple steps:
- Make sure jQuery is enabled on your website. More on how to enable jQuery in this post.
- Add the sticky jQuery library. Download it from here: http://stickyjs.com/. Unzip the folder to your computor.
- You only really need one single file from the sticky library: jquery.sticky.js
- Upload the jquery.sticky.js file to your webserver, and then add a link inside the <head> of your html document, right after the basic jQuery library. Something like this:
- Add the code for the sticky menu or any other element you wish to set to fixed at a certain scroll position, Something like this:
The top-position could also be negative, something like this: