Sridhar Katakam

Genesis and WordPress Tutorials

Using Waypoints Sticky Elements to fix elements to top of page upon scrolling in WordPress

by 13 Comments

In the past I showed elements like header and navigation can be made to stick to top of page when the user scrolls past using jQuery script and jQuery.Pin.

In this article I show how jQuery Waypoints Sticky Elements shortcut can be used to do the same.

waypoints-sticky-elements-wordpress

Upload waypoints.min.js and waypoints-sticky.min.js to child theme directory/js.

Create a file named say, waypoints-sticky-init.js in the same folder having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I tried using the method described above with the Minimum Pro theme attempting to get the SITE TAGLINE to stick UNDER the already ‘fixed’ SITE HEADER.

    It didn’t work out for me how it did for you here. What did I miss?

    Reply

  • I did this for the secondary menu on Magazine Pro. It works like a charm, thank you. However, the JS file was giving my menu a width, which made it non-responsive.

    For those doing this tutorial in the future, I commented out lines 38-39 in the file jquery.pin.js and it worked like a charm. My menu still sticks, yet it is responsive again and collapses when the browser is resized. It’s not perfect (aligns to the right, slightly) , but it’ll do for now, til I work out what I need to edit next. I’ve never done any JS in my life!

    Reply

  • Does this work for non-Genesis themes? I’m trying to get the banner at the top class name banner-widget to stick to top underneath the header. I’m using Minimum theme by Qode

    I’ve placed js files in my child theme js folder as well as trying in root folder and calling scripts in the header.

    Any help would be tremendously appreciated.

    Reply

  • My theme Minimum from Qode uses page transitions so the sticky effect only works on visiting the first blog post. If I click on another post I have to hit refresh for it to load.

    Any ideas on how and where I should place scripts so they load for each post?

    Thank you for your most awesome blog!

    Reply

  • Thanks for this. If you check http://99u.com/, the same effect is achieved by the developer of the site, except that the logo slides into the top sticky bar in an easing fashion. Any idea how this can be done? Thanks in advance

    Reply

  • Hey Sridhar,

    Thanks for the post and for bringing Waypoints to my attention. This info came at a great time as I was about to begin researching jQuery scripts for my Genesis Customizer plugin to add a sticky header option. As a heads up, one thing you may want to consider is adding z-index: 9999; to the CSS.

    Cheers,

    Ren

    Reply

  • I have been trying to get this to work for the centric pro theme, but it doesnt work.

    Besides the menu in the header right widget area I would like to have a sticky primary navigation below the header. Anyone knows how to fix this since Im having a hard time on doing so, using the centric pro theme which has a sticky header and shrink effect upon scrolling.

    I have checked several tutorials and have been playing with the CSS, but the primary navigation shows either on top of the header or dissapears behind the header.

    Reply

  • Hi Sridhar

    I’ve been experimenting with making the header sticky, and all works ok apart from the responsive nature of sites.

    Although I set a minimum to switch off for mobile devices, the header content doesn’t resize effectively,

    So, for example swivelling from ipad landscape to ipad portrait, the header doesn’t position properly unless reloading the browser.

    I’ve left the minimum at 960 for now, but it does also ruin the ‘demo’ when resizing the browser to show people what responsive means… it ‘sticks’ the header at the original size.

    Is there any way around this?

    All the best

    Reply
    • >