Jump to content


Photo

Need Some Jquery Sliding Help!


  • Please log in to reply
3 replies to this topic

#1 Kervtuza

Kervtuza

    Member

  • Member
  • PipPipPip
  • 62 posts

Posted 31 January 2013 - 12:08 AM

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

#2 grabenair

grabenair

    Advanced Member

  • Member
  • PipPipPipPip
  • 361 posts
  • LocationIowa

Posted 31 January 2013 - 11:09 AM

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

  • 0
Standards will change. But your website needs to remain in serving its audience.
My Portfolio site

#3 Kervtuza

Kervtuza

    Member

  • Member
  • PipPipPip
  • 62 posts

Posted 31 January 2013 - 10:21 PM

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, 31 January 2013 - 10:23 PM.

  • 0

#4 grabenair

grabenair

    Advanced Member

  • Member
  • PipPipPipPip
  • 361 posts
  • LocationIowa

Posted 01 February 2013 - 10:23 AM

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.co...istent-headers/

Edited by grabenair, 01 February 2013 - 10:51 AM.

  • 0
Standards will change. But your website needs to remain in serving its audience.
My Portfolio site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

★★★★★ 5 Star Rated Web Developer Course - check it out now!