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 Add comments

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.

https://drafie-design.nl/change-header-as-scrolling-the-page/trackback/Trackback URI:

Ciprian

Experienced web developer and graphic designer. Former consultant for Suffusion theme and former moderator on Suffusion Support forum. I teach others while learning myself.

Google+ Profile

Google+ Page

This site uses Akismet to reduce spam. Learn how your comment data is processed.

19 Responses to “Change header as scrolling the page”

Comments (18) Pingbacks (1)

Hi drake,

I try to implement this how to http://www.drafie-design.nl/change-header-as-scrolling-the-page/ on http://pitsaja.com, the header is okay but the footer become hidden/unreadable. How to fix this. Thank for your reply.

Cyril

01/10/2016 at 00:49
Thank you.. works like a charm!!

Jap

06/02/2015 at 10:45
Hi, thanks for coming and apologize for my delayed answer. I saw your comments but I was very busy these days and I haven’t time to research on your problems.

I always disable wp-admin bar and “edit” link in pages as I want to see my sites exactly as my visitors. I always keep opened 2 tabs when I work on a site – the admin area in one tab where I make changes, and the frontend in another tab to see the changes in action. The code need a “fixed” position for staying in the same place when scroll the site. If you always keep the admin bar on top, even for visitors, is simple to change the top position of .scroll-nav element (top:32px !important; should do the trick).

Drake

06/02/2015 at 09:03
The code is not longer active on your site, but I can presume that the header was smaller with the equivalent of padding (so, padding:0; for #header element should help). And the line was the bottom border of #nav element which can be removed at Suffusion Options -> Skinning -> Navigation Bar Below Header -> Navigation Bar Border, or by adding at Custom Styles:

#nav {border-bottom:none;}

1

#nav {border-bottom:none;}

Drake

06/02/2015 at 09:56
Hello,

i am using a rotating set of background images for my suffusion theme. To get the background images fit in the container when using responsive settings I had to place #header-container {background-size:contain;} in my style file.

Then the header image fitted correctly. But when i try to use this code of your site something strange is happening.

I had to remove the width:100%; /* this will re-align the header with the wrapper */ part and replace it with background-size:contain;to get almost the right size.

then I had to comment out the left:0; /* align horizontally the header in IE if is needed */ te get it in the middle of the site.

So now the header is above the main site, staying if scrolling so thats cool but the header area is half a cm smaller on both sides of the site.

And below the navigation menu there is a blue line with 100% width of my total window.

How to solve this?

thank you!

jap

jap

03/02/2015 at 22:23
Hello,

Nice code. But the menu will stay behind the admin/buddypress bar. Is it possible to show it under the admin bar?

thank you in advantage!

jap

03/02/2015 at 21:19
I edited the codes in the original post to reflect the changes for IE browsers (http://www.drafie-design.nl/how-to-have-a-fixed-header-in-suffusion-theme/)

Drake

06/04/2014 at 18:50
Ok Michael, in the same idea replace in my code “margin-top” with “top” property, so will have:

#wrapper { position:relative; top:130px; }

1
2
3
4

#wrapper {
position:relative;
top:130px;
}

Drake

06/04/2014 at 18:25
Thanks! That worked great for the Nav Width settings in IE10 (by the way it was already working well in Android as well).

Now the only remaining challenge is IE10 not responding to #wrapper {
position:relative;
margin-top:130px;
}

Michael

06/04/2014 at 17:09
Hello Drake. Your code for Sticky Header has worked great for me in Firefox and Chrome – Thanks a lot! Of course IE10 isn’t being as cooperative. It’s not responding to the Nav Width settings nor the Wrapper Margin-Top. Is there anything you can do to whip it into submission? http://michaelmaguireconsulting.com

Michael Maguire

06/04/2014 at 16:18
I can’t test, because I don’t have IE10 anywhere, but, try to add also at Custom Styles:

#header-container, #nav {left:0;}

1

#header-container, #nav {left:0;}

Drake

06/04/2014 at 16:30
Thank you for pointing out to me over in the Suffusion forum that I had missed this response! I must have not ticked the ‘notify me’, so that I didn’t get an email. I should have known to check back here :/

Still needs tweaking: my small logo isn’t centered well. Did you just use an image widget to add the small header?

Ourobo

04/04/2014 at 10:26
No, the changes will work even if you have widgets in Header Widget Area, the javascript already address that area (identified by id ‘#header-widgets’).

But, you made a mistake when you’ve added the codes from above. You added ALL codes at Custom Footer Javascript, while there is necessary to add only the first piece of code. The second piece is CSS and need to be added at Suffusion Options -> Backend -> Custom Includes -> Custom Styles (the first edit area from that options page).

Need to respect exactly the steps as described and the places where need to paste the codes. A CSS code pasted in place for javascripts will break not only your custom javascripts, but even the javascripts used by theme or plugins. As jQuery functions pasted in the place reserved for CSS will break the look of entire site.

Drake

28/12/2013 at 00:55
Tried to make this change at http://www.atelieremmanuel.org, but nothing happened. Maybe because I have widgets activated in my header?

Ourobo

27/12/2013 at 22:13
Oooops…Please ignore my last comment as I couldn’t get it to work becauseI had a typo. Thanks for the post!

Ernie

27/11/2013 at 20:26
Instead of using a background colour I’d like to use a background-image. I can’t seem to get this to work as it scrolls away regardless of what I try. Any thoughts? Thanks a lot!

Ernie

27/11/2013 at 18:47
Can try to change the value of 150 in the jQuery code. Test what’s happens if increase/decrease the value. Also can try to fix the height of header container by adding at Suffusion Options -> Backend -> Custom Includes -> Custom Styles:

#header-container {height:130px;}

(also can play with the value of 130px).
As I said, I didn’t changed anything which was previously added for fixing the header, so, my dimensions are already fixed as in previous article. But even in that article I specified that some positions and dimensions need to be adjusted for each site.

Drake

06/10/2013 at 05:59
Thanks for this post. Navigation bar fixed nicely, but when we scroll the page it hides some part of the post instantly. Please have a look on my site http://infogyd.com

Pawan

06/10/2013 at 05:35

Ciprian

Leave a Reply

19 Responses to “Change header as scrolling the page”