Changing An Elements Property Upon Scrolling?

[Kervtuza]

Hey Guys,

 

Looking for a little help on how I can change an elements properties from scrolling a page using jQuery.

 

I have a site with a fixed header + navigation, I made a script so when I click a link in the nav, it smoothly scrolls the page to the anchor and it moves the fixed header and navigation up so only the navigation stays fixed at the top of the page for easy access. The problem is if you don't use the navigation and just scroll the page right away the header stays there and takes up a fair portion of the screen.

 

If you would like to see what I am work with for a better idea, here is the link my site

 

What I am trying to do is, have the header and nav position: relative; and once you scroll down just a bit passed the header, have the position change to fixed.

 

I am stuck:\

 

Any ideas?

[grabenair]

I Googled how to make the nav stay fixed when scrolling the page and came up with a lot of answers but this one is what I believe you are looking for

 

http://stackoverflow.com/questions/6980821/fix-object-to-top-of-browser-window-when-scrolling/6981076#6981076

 

Hope this helps, if not I did see it somewhere in the jQuery library but do not remember where off hand.

[Kervtuza]

Thanks, that did point me in the right direction.

 

Another problem I am having though, if you look at the site, when you click on the about, projects or contact links it flows smoothly, but when you click on the home link, it moves the site the site back to the top but it moves it underneath the fixed header and nav instead of where it starts when the site first loads, any ideas how I can fix this?

 

Here is the script I am working with.

 

$(document).ready(function(){
 $(".nav_home").click(function(){
$("#branding").animate({
     top:'0px',
   });
$("#nav_main").animate({
     top:'175px',
   });
 });

   $(".nav_contact, .nav_projects, .nav_about").click(function(){
$("#branding").animate({
     top:'-170px',
   });
$("#nav_main").animate({
     top:'5px',
   });
 });

 $(".scroll").click(function(event){		
	event.preventDefault();
	$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});

[grabenair]

I am not sure with out seeing the html. But you might try this

 

 $(".nav_home, .nav_contact, .nav_projects, .nav_about").click(function(){

 

I think this is the part that controls the banner staying out of site.

 

Although do not trust me on this, I am not all that good with jQuery. I am the guy who looks up code in a library and makes some changes to what I need it to do.

[Kervtuza]

So I have managed to fix this problem using

$('html, body').animate( { scrollTop: 0 }, 'slow' );

 

I have one last issue and if I can figure this out then I will have done everything I needed to do in my first jQuery script.

 

If you look at My link and click the links, the page now slides accordingly, the last problem I am facing is when you click the links about, projects or contact and scroll manually to the top of the page the header remains hidden.

 

Is it possible to use scrollTop in a conditional statement so that when scrollTop = 0 it will have the same effect as clicking the home button?

 

 

 

Thanks for the help everyone!