Need Some Jquery Sliding Help!

[Kervtuza]

Hey Guys,

 

So I am working on my portfolio, trying to use jquery to give my page a nice sliding effect but I am running into a few problems.

 

If you look at the source code of my page http://www.jasonkervin.com, you'll see that when you click on about, projects or contact nav links it slides to that area of the page and the entire header + nav move up and stay fixed even if you continue to scroll(which is what I want).

 

The problem is that if you just scroll the page without using the nav, the header and nav stay in their position and take up a good chunck of the page.(not what I want)

 

my jquery code on that page is pageslider.js and pretty basic, is there a way I can have the header and nav's position not be fixed until it the page is scrolled just a bit?

 

any ideas would be GREATLY appreciated:]

[grabenair]

You might be able to customize this code to get what you want. You could also do it with css. On all of your pages except the home page set a negative margin on the top of your header to place it where you want it. Then customize this code to work only on your home page.

 

//makes the heder dispear when clicked on the links
$(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);
       });
});

[Kervtuza]

I wrote that code originally but it doesn't work the way I want it to. I'm trying to replicate the effect of http://www.planetside2.com/ when you scroll, the properties change. Is there something I can add to this code so as soon as you scroll x amount of pixels the #branding and #nav_main divs can have their top property changed?

Edited February 1, 2013 by Kervtuza

[grabenair]

You'll need to find out the height of the header and its position on the page then show or hide the div depending on the scrollTop value.

 

// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();

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

function checkY(){
   if( $(window).scrollTop() > startY ){
       $('.fixedDiv').slideDown();
   }else{
       $('.fixedDiv').slideUp();
   }
}

// Do this on load just in case the user starts half way down the page
checkY();

 

This should get what you want, if not let me know and I will try again.

 

Instead of adding a new replay I am adding it here. I just found something that will do what you want. You will just have to do a little customization. Scroll down to the bottom and check out the demo. What you will do is make your

  <div id="nav_main">

sticky. Here is the url http://css-tricks.com/persistent-headers/

Edited February 1, 2013 by grabenair