Animated Header Fixed on Scroll Down with jQuery

Posted on April 16, 2015 by Dan Doicaru in jQuery/JavaScript Category with Medium Difficulty

Learn how to create an animated header with jQuery to have position fixed when you scroll down the page, appearing with easing effect from top to bottom and disappearing when you scroll back to top.

The trick to create our animated header is to have static position (all elements have static position if position is not defined) and top property set with the height of the header but in negative value, so the animated header should pull down when you scroll. You also need to add transition property for top value to do the animation, width must be 100% and left must be 0.

HTML Structure for Animated Header

If you want to have a shadow under your header, you must obviously have position relative to put the header in front of all objects. In this special case the trick above will not work because our animated header will be pulled up instead of down. To solve this we will need an extra container for that shadow, so I will do that in this tutorial.

<div class="headerContainerWrapper">
	<div class="headerContainerShadow">
		<div class="headerContainer">
			<!-- html code for your header -->
		</div>
	</div>
</div>

View Full HD Video

The CSS

As I said above, our animated header should have static position in his normal state, using all the settings from fixed position (top, left, width and transition). After the user will scroll down we will add a class .scrollActive to <body> tag, to work easily with elements.

.headerContainerWrapper {
	position: static;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transition: top 500ms ease;
	-moz-transition: top 500ms ease;
	-o-transition: top 500ms ease;
	transition: top 500ms ease;

	/* enable hardware acceleration to fix laggy transitions */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.headerContainerShadow {
	background: #FFF;
	border-bottom: 2px solid #eee;
	box-shadow: 0 0 30px 0 rgba(0,0,0, 0.3);
	position: relative;
	z-index: 999999;     /* to place the header above all elements */
}
.scrollActive .headerContainerWrapper {
	position: fixed;
}

As you can see I applied the shadow on another inner <div> to give me the ability to use relative position and the main container is used to create the animated header effect.  You should have this until now:

Fixed Animated Header with Static Position (jQuery)

The jQuery and Javascript Code

The code for animated header is a bit complex as I did everything automatically, which means you won't need to set the height of your header container in the actual code and CSS, because jQuery will do it for you by storing the height value inside a variable.

Also, when adding position fixed to our animated header, it will be taken out of the current static position and you will need to add a top padding to <body> tag.

And the last thing, if you have bottom border or box-shadow apllied to your animated header, I created 2 variables where you can set the amount of both properties. Make sure to be the same as in css code. If you look in the css above, my Javascript variables have the same values.

<script type="text/javascript">
	// get header height (without border)
	var getHeaderHeight = $('.headerContainerWrapper').outerHeight();

	// border height value (make sure to be the same as in your css)
	var borderAmount = 2;

	// shadow radius number (make sure to be the same as in your css)
	var shadowAmount = 30;

	// init variable for last scroll position
	var lastScrollPosition = 0;

	// set negative top position to create the animated header effect
	$('.headerContainerWrapper').css('top', '-' + (getHeaderHeight + shadowAmount + borderAmount) + 'px');

	$(window).scroll(function() {
		var currentScrollPosition = $(window).scrollTop();

		if ($(window).scrollTop() > 2 * (getHeaderHeight + shadowAmount + borderAmount) ) {

			$('body').addClass('scrollActive').css('padding-top', getHeaderHeight);
			$('.headerContainerWrapper').css('top', 0);

			if (currentScrollPosition < lastScrollPosition) {
				$('.headerContainerWrapper').css('top', '-' + (getHeaderHeight + shadowAmount + borderAmount) + 'px');
			}
			lastScrollPosition = currentScrollPosition;

		} else {
			$('body').removeClass('scrollActive').css('padding-top', 0);
		}
	});
</script>

To check when user will scroll down we will use the scrollTop() function inside scroll() function to update the value when scroll event occurs. To check when user will scroll up we will add a variable that keeps the last biggest value of the scrollTop() function and compare them together.

On scroll down, we will add a class .scrollActive on <body> which will do the trick for us by adding fixed position on our animated header using that class. Do not forget to add jQuery library in your document. You can download the latest version here.

Below you can view a live example with the animated header or you can download source files and check the whole code. If something is unclear, you can check the video tutorial above or drop me a comment.

Live Demo

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.33 out of 5)
Related Articles
Comments
  1. Gravatar Icon Ares:

    Hello,

    Could you tell me what to change so the header appears when the user is scrolling up? Thanks

    • Hello Ares,

      Not sure what you are looking for. You want the header to remain visible even if the user scrolls up, or do you want to hide the animated header when the user is scrolling down and to be visible only when scrolling top? Anyway, I wouldn’t suggest you using that way because you will need another container with another header to do that.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


5 + 3 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.