Parallax Scrolling 1

One of the common trends in Web Design, is having the header bar change size or slide down, once the user reaches a certain point on the page. I thought this was a neat effect. I wanted to see if I could replicate this. I had a feeling that I would have to find out how I can get the position of where the user is on the page, so I can code it to do what I need it to do when the user reaches that point. After some research, I found out that with one line of code and using jQuery, you could get that position. The page I ran across is listed below.

 

The code below determines the position the user is on the page. Once you have that position and know when you want the change to happen, you can start coding the change. In my case, my header is 60 pixels tall, so I wanted the change to happen once the user has scrolled 60 pixels.

 

Javascript

//retrieved from http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery
$(window).scroll(function (event) {
        var myScrollPos = $(window).scrollTop();

        if(myScrollPos > 152){
            $('#Header').addClass('below152');
         }
});

 

CSS

#Header{
	width:1440px;
	height:125px;
	background-color:#FFF;
}
#Header.below152{
position:fixed;
height:60px;
top:0;
}

 

After some time and troubleshooting, I was able to make achieve what I wanted. You can test it here.

 

Credit:
Stackoverflow
http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery