Jump to content

Need Some Jquery Sliding Help!


Kervtuza

Recommended Posts

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:]

Link to comment
Share on other sites

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);
       });
});

Link to comment
Share on other sites

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 by Kervtuza
Link to comment
Share on other sites

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 by grabenair
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...