Fixed menu after scrolling to a certain level. Position sticky CSS tricks!

This article was written by in April 25, 2015, & may not be posted on other sites!
Original source url for this article: Fixed menu after scrolling to a certain level. Position sticky CSS tricks!

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. Position sticky CSS tricks & tips

 

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:

  1. Make sure jQuery is enabled on your website. More on how to enable jQuery in this post.
  2. Add the sticky jQuery library. Download it from here: http://stickyjs.com/. Unzip the folder to your computor.
  3. You only really need one single file from the sticky library: jquery.sticky.js
  4. 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:
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

    <script src="http://your-website.com/jquery.sticky.js" type="text/javascript"></script>
    </head>
  5. 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:
    $("#menu").sticky({topSpacing: 0});
    The top-position could also be negative, something like this:
    $("#header").sticky({topSpacing: -30});

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

One thought on “Fixed menu after scrolling to a certain level. Position sticky CSS tricks!

Leave a Reply

Your email address will not be published. Required fields are marked *