Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Member
    Join Date
    Nov 2012
    Location
    Huddersfield, West Yorkshire
    Posts
    68
    Member #
    33961
    Liked
    5 times

    Animate Fixed Header

    Okay so I have a header on a new site I am working on.

    /* CSS */

    header {display: none;}

    Now I have a Scroll Point Jquery script, so when the page scrolls to a certain point, the header changes to:

    /* CSS */

    header {display:block; position: fixed;}

    This works fine, but I want to know how to animate this in the jQuery.

    // JS //

    $(function(){

    var stickyHeaderTop = $('#wrapper').offset().top;

    $(window).scroll(function(){
    if( $(window).scrollTop() > stickyHeaderTop ) {
    $('header').css({
    position: "fixed",
    display: "block"
    });}
    else {
    $('header').css({
    position: 'relative',
    top: '0px',
    display: "none"
    });}
    });
    });

    I have tried replacing .css with .animate, but still no luck.

    Any help would be greatly appreciated

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:24 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com