scrolling | Drafie's Design

Change header as scrolling the page

Oct 062013

Posted by Ciprian on 06/10/2013 How-To's Tagged with: CSS, fixed header, fixed navigation bar, javascript, jQuery, scrolling, Suffusion 19 Responses »

For using this solution on simple html sites, without WordPress and Suffusion, see my answer on this question from Stack Overflow. For seeing the codes in action and testing the solution for your own site, check this fiddle on jsfiddle.net.

Latest Edit: I changed the hide() and show() methods for #left-header-widgets used for displaying/hiding the Left Header Widget Area which contain the small logo, with css(‘visibility’,…). The CSS visibility property will hide the element but will keep its container, so with the actual code the menu will stay in the same position either when scroll or not,

Some time ago I wrote this article about how can fix the header in Suffusion theme. Few days ago it was a question on that article about how to fix the Navigation Bar Below Header, but only after the page is scrolled.

So, here is the answer – it’s pretty simple to obtain that in Suffusion. I don’t change anything from that article about fixed header, only I added few lines of javascript and few lines of CSS. But this new codes need to work even on a clean installation of Suffusion, without fixing the entire header as is shown in the previous post. Also, a simple way to have a fixed menu is to use the Navigation Bar Above Header which can be fixed as it shown in that post.

But for large headers is better to use the Navigation Bar Below Header, as it keep the menu in under the eyes of visitors. So, below are my additions for fixing the Navigation Bar Below Header after the user scroll down the page.

1. First I added the next code at Suffusion Options -> Back-end -> Custom Includes -> Custom Footer Javascript (can be also added at Custom Header Javascript, but there I have some other functions and I wish to show you only this piece of code)

$j=jQuery.noConflict();
$j(document).ready(function() {	
	var nav = $j('#nav');
            $j('#left-header-widgets').css('visibility','hidden');
	$j(window).scroll(function () {
		if ($j(this).scrollTop() > 150) {
			nav.addClass("scroll-nav");
$j('#header').hide();
$j('#header-widgets').hide();
$j('#left-header-widgets').css('visibility','visible');
		} else {
			nav.removeClass("scroll-nav");
$j('#header').show();
$j('#header-widgets').show();
$j('#left-header-widgets').css('visibility','hidden');
		}
	});
});

$j=jQuery.noConflict();

$j(document).ready(function() {

var nav = $j('#nav');

$j('#left-header-widgets').css('visibility','hidden');

$j(window).scroll(function () {

if ($j(this).scrollTop() > 150) {

nav.addClass("scroll-nav");

$j('#header').hide();

$j('#header-widgets').hide();

$j('#left-header-widgets').css('visibility','visible');

} else {

nav.removeClass("scroll-nav");

$j('#header').show();

$j('#header-widgets').show();

$j('#left-header-widgets').css('visibility','hidden');

}

});

What does the code? The code measure the scrolling amount from the top of page. When the user scroll down with more than 150px (can change this value as you wish), more events will happens.

we add a new class to navigation bar: .scroll-nav – this new class will be used for positioning the navigation bar on the top of page after scrolling;
we hide the #header and #header-widgets elements, we don’t need them after scrolling down;
but we display the #left-header-widgets where we’ve previously added a smaller version of logo, so our logo will be displayed in the navigation bar.
when the user scroll back to top, the header reappear.

Now, few lines of CSS added at Suffusion Options -> Back-end -> Custom Includes -> Custom Styles will definitivate our changeable header:

.scroll-nav {z-index: 9999; position: fixed; left: 0; top: 0 !important; width: 100%;}
#nav #left-header-widgets a {background:none;}
#left-header-widgets {visibility:hidden;border:none;}
#left-header-widgets img {border:none !important;}

.scroll-nav {z-index: 9999; position: fixed; left: 0; top: 0 !important; width: 100%;}

#nav #left-header-widgets a {background:none;}

#left-header-widgets {visibility:hidden;border:none;}

#left-header-widgets img {border:none !important;}

The first line it format our new class added by jQuery code, so the navigation bar is moved on the top of page. The rest of lines format the smaller logo added at Appearance -> Widgets in Left Header Widgets Area.

What can I say more? It’s done… Aaa… I centered the navigation bar at Suffusion Options -> Other Graphical Elements -> Navigation Bar Below Header for making room for smaller logo. Can see the result right now if you look on the top of this page.