Change menu size on scroll with jQuery scrollTop()

Have an interactive menu for your website

Having a fixed positioned menu and minimize the menu when you scroll the page down is one of the element in the modern website design. Have you wonder how to do it? Let’s first take a look at the demo to have a clearer picture of what we’re talking about.

http://www.codinglover.com/demo/scrolltop/

scrolltop1

 As you can see in the demo, this is the original size of the menu.

scrolltop2

After you scroll the page down, it fixed the position at the top, size become smaller and the background become transparent.

 

Let’s start with the structure

scrolltop-structure

This is how I structure the demo.  

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

First you’ll need to include a jquery library in the page. And include the following code in your page.

$( document ).ready(function() {
  var header_h = $("#header-wrapper").height();
  var changepoint = parseInt(header_h /2);
  
  function header_transform() {
	window_y = $(window).scrollTop();
	if(window_y > changepoint) {
	  if(!($("#header-wrapper").hasClass("fixed"))) {
	  	$("#header-wrapper").hide();
		$("#header-wrapper").addClass("fixed");
		$("#header-wrapper").fadeIn(500);		
	  }
	} else {
	  if(($("#header-wrapper").hasClass("fixed"))) {
		$("#header-wrapper").fadeOut(500, function() {
		  $("#header-wrapper").removeClass("fixed");
		  $("#header-wrapper").fadeIn(300)
		});
	  }
	}
  }

  $(window).scroll(function() {
	header_transform();
  })
});

Now we’ll look at the code separately.

$(window).scroll(function() {
	header_transform();
})

This is to tell the browser, when user scroll the page, call the header_transform function.

var header_h = $("#header-wrapper").height();
var changepoint = parseInt(header_h /2);

header_h is the height of the header_wrapper and I set the change point at half the height of the header_wrapper.

window_y = $(window).scrollTop();

Here’s where we’ll use scrollTop() function to tell us where is the position of the page now.  

 

What we going to do is, when user scroll the page, and when there’s only half or lesser of the header is being show in the screen, we minimize the header size, and make it transparent so you can still see the content behind.

 

if(window_y > changepoint) {
  if(!($("#header-wrapper").hasClass("fixed"))) {
 	$("#header-wrapper").hide();
	$("#header-wrapper").addClass("fixed");
	$("#header-wrapper").fadeIn(500);		
  }
} else {
  if(($("#header-wrapper").hasClass("fixed"))) {
	$("#header-wrapper").fadeOut(500, function() {
	  $("#header-wrapper").removeClass("fixed");
	  $("#header-wrapper").fadeIn(300)
	});
  }
}

In the script above, we do a check is the position is larger than half of the header height, we hide the header_wrapper, add a “fixed” class, and fade in the header_wrapper again. When user scroll up again, we reset what we’ve done earlier.

 

The CSS

#header-wrapper{background:#ffffff;padding:0px;}
#header-wrapper #header{width:800px;margin:0 auto;}
#header #logo{float:left;padding:10px 0px;width:248px;}
#header #menu{float:right;}
#header #menu ul{float:right;padding:0;margin:0;list-style-type:none;}
#header #menu li{float:left;font-size:24px;padding:0;margin:0;}
#header #menu li a{float:left;height:38px;padding:30px 20px 15px 20px;}
#header #menu li a:hover{background:#ebebeb;}

.fixed{position:fixed;top:0px;left:0px;opacity:0.9;width:100%;}
.fixed #header #logo {padding:5px 0px;}
.fixed #header #logo img{width:60%;}
.fixed #header #menu li{float:left;font-size:18px;}
.fixed #header #menu li a{float:left;height:23px;padding:14px 20px 12px 20px;}

When “.fixed” class added, the width and font size will be overwrite with new setting. Of course, you can change the size based on your need.

 

Click here to download the demo

Leave a Reply

Your email address will not be published. Required fields are marked *