Want to slide your site's header out of view when scrolling down and slide it back in when scrolling up? In this article I show how to incorporate Headroom.js in WordPress for non handheld devices.
Upload headroom.min.js to your child theme directory/js (create js directory if it's not present).
I am an independent WordPress web consultant with 10 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and PSD/design to WP.
Great post Sridhar. I assume I can use this to replace the header in the original post with the full width header and scroll animation for the fade out down link?
Sridhar, You are one incredibly smart and talented developer. I inquired about this late last night…and today you post this awesomeness. I have learned so much from you and this great web site. Thank you again for sharing.
Hi Sridhar. first of all, this article is amazing. Thank you so much for sharing this knowledge. i tried this technique in minimum pro theme and it works perfectly. Then i found an issue with safari browser. When i try my site in safari, menu appears just for a sec and then disappears. Can you please take a look at
and guide me what is going wrong here? safari version 5.1.7
Thank you so much for your help. keep it up
Hello! Very interesting tutorial but I have a question!
Can I make something like this but with a div footer ? I have to create a personlized div in the bottom side, hidden and when you scroll to the bottom this appear!
I tried to modify the headroom code like a footer but not work!
You might want to try using Waypoints. You can write jQuery to add/remove CSS to your footer div to show and hide when another element comes to focus in viewport.
I’m current using the Envy Pro theme which has a secondary nav bar above the primary nav.
Is they a way of stopping the primary nav from covering the secondary nav above it when headroom.js is used for the primary nav?
I’m either trying to have the secondary nav scroll with the page or slide and reveal with the primary nav using headroom.js. either way is ok, but i can’t find a solution.
Great post Sridhar. I assume I can use this to replace the header in the original post with the full width header and scroll animation for the fade out down link?
Give it a try 🙂
Sridhar, You are one incredibly smart and talented developer. I inquired about this late last night…and today you post this awesomeness. I have learned so much from you and this great web site. Thank you again for sharing.
Sridhar, In the event you have not seen this yet, I thought this was worth sharing.
http://janpaepke.github.io/ScrollMagic/
How to implement this in Centric Pro ? Need to set Header To Fixed of say 60 Pixels with Tittle too so I don’t have shrinking effect.
I just want the Nav to start at 60 px (default) then dis appear as scroll down and then re-appear upon scroll up
Hi Sridhar. first of all, this article is amazing. Thank you so much for sharing this knowledge. i tried this technique in minimum pro theme and it works perfectly. Then i found an issue with safari browser. When i try my site in safari, menu appears just for a sec and then disappears. Can you please take a look at
and guide me what is going wrong here? safari version 5.1.7
Thank you so much for your help. keep it up
Hello! Very interesting tutorial but I have a question!
Can I make something like this but with a div footer ? I have to create a personlized div in the bottom side, hidden and when you scroll to the bottom this appear!
I tried to modify the headroom code like a footer but not work!
thank you so much!
You might want to try using Waypoints. You can write jQuery to add/remove CSS to your footer div to show and hide when another element comes to focus in viewport.
http://www.sridharkatakam.com/using-waypoints-jquery-animate-fade-elements-scrolled-wordpress/
great post! is it possible to only change the header opacity with a fade transitions instead of completely hiding it?
thanks!
Odd, when I add
//* Enqueue Headroom
add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ );
function sk_enqueue_scripts() {
if ( wp_is_mobile() )
return;
wp_enqueue_style( ‘animations’, get_stylesheet_directory_uri() . ‘/css/animations.min.css’ );
wp_enqueue_script( ‘headroom’, get_stylesheet_directory_uri() . ‘/js/headroom.min.js’, ”, ”, true );
wp_enqueue_script( ‘jquery-headroom’, get_stylesheet_directory_uri() . ‘/js/jQuery.headroom.min.js’, array( ‘jquery’ ), ‘1.0.0’, true );
wp_enqueue_script( ‘headroom-init’, get_stylesheet_directory_uri() . ‘/js/headroom-init.js’, array( ‘jquery-headroom’ ), ‘1.0.0’, true );
}
to my themes functions.php I get the following error: Fatal error: functions.php on line 334. What am I doing wrong?
Can you paste the code in your child theme’s functions.php at http://www.pastebin.com and provide the link?
Yep, here you are: http://pastebin.com/5PDAZy6Y
Which theme is it?
Remove this line and see:
wp_enqueue_script(‘jquery’);
jQuery gets automagically enqueued when needed in WordPress.
The theme is Garnish: http://themeforest.net/item/garnish-cleancut-wordpress-portfolio-theme/308989
Hello,
perfect solution for me, but how can i use it with dynamik gen Child Theme.
It will not load js-files. where i have to upload the files?
Thanks
Hi Sridhar,
The Headroom.js website also has this script working on mobile devices.
How would you modify this tutorial to also work on mobile devices?
Best regards
Darrell
In the code being added in functions.php, remove http://pastie.org/pastes/10269281/text.
Hi Sridhar,
I’m current using the Envy Pro theme which has a secondary nav bar above the primary nav.
Is they a way of stopping the primary nav from covering the secondary nav above it when headroom.js is used for the primary nav?
I’m either trying to have the secondary nav scroll with the page or slide and reveal with the primary nav using headroom.js. either way is ok, but i can’t find a solution.
Any help would be much appreciated
Best regards
Darrell
hey, can’t seem to find the JS files that are attached?
The author of the script seems to have moved/reorganised the URLs/names.
headroom.min.jsis nowjQuery.headroom.jsand it can be downloaded from https://raw.githubusercontent.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js.You will need to update any references to this file in the code accordingly.
Thanks :-), will do my best
Hey Sridhar,
I am attempting to get this working with the updated JS URLs/names and I keep getting an error in the jQuery.headroom.js. Any ideas?
“Uncaught ReferenceError: Headroom is not defined”
Did not manage to get it to work either unfortunately. let me know if you find a fix
Updated the tutorial with correct references to files so it works.
The script references are out of date. The files can be found here:
http://wicky.nillia.ms/headroom.js/
It took me a while to figure out that the files I was referencing only consisted of a 404 message, so it might be useful to update the tutorial.
/
Done.
@Sridhar Thanks alot! Most helpful 🙂
Got this error though :/
headroom-init.js?ver=1.0.0:3 Uncaught TypeError: $(…).headroom is not a function(anonymous function) @ headroom-init.js?ver=1.0.0:3i @ jquery.js?ver=1.12.4:2fireWith @ jquery.js?ver=1.12.4:2ready @ jquery.js?ver=1.12.4:2K @ jquery.js?ver=1.12.4:2
Found the issue! had to change the snippet going to functions.php
jquery.headroom.min.js —–> jquery.headroom.js =)