CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
CroaToa
CroaToa

Reputation: 910

jQuery fixed header slide down on scroll issue

I'm newbe in jQuery, please do not judge strictly. I want header become fixed when I scroll page 300px. And remove fixed if <300px. And I want to animate it, slide down when I scroll down, and slide up when I scroll top. Something like this Some site, scroll down and you'll see what I want.

My html like that

<div class="heading-wrapper">
<a href="#">1 </a>
<a href="#"> 2</a>
<a href="#"> 3</a>
<a href="#">4</a>
<a href="#">5</a>    
</div>

Css

.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}

.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}

and jQuery

$(window).scroll(function() {
if ($(this).scrollTop() > 300){  
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
  }
  else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
    $('.heading-wrapper').removeClass("fixed");
    },800); 
  }
});

It dont work like what I want.

  1. If scrolling by pressing down mouse whell - it dont animate..
  2. Animation appears at once only..
  3. Slide up animation never appears..
  4. If I scrolling fast up and down, the whole structure breaks down, no styles are added where necessary))

Please, help me to fix this, and remember, do not judge strictly! :)

JsFiddle link

Upvotes: 1

Views: 10484

Answers (2)

Yoann
Yoann

Reputation: 3060

Here's how I would do it.

First, depending on the browsers you're supporting, you could add this CSS :

.heading-wrapper {
   position: fixed;
   top: -80px;
   transition: top 1s linear; /*as you wish*/
   [...]
}

.heading-wrapper.relative {
    position: absolute;
    top: 0px;
}

.heading-wrapper:not(.relative).fixed {
    top: 0px;
}

Then in Javascript :

var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;

$wrapper.clone().appendTo("body").addClass("relative");

$win.scroll(function () {
   top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
   if( top > 300)
       setTimeout(function(){$wrapper.addClass("fixed");},0);
   else if( $wrapper.hasClass("fixed") )
      setTimeout(function(){$wrapper.removeClass("fixed");},0);
});

I updated your JSFiddle.

EDIT : Added a cloned menu, absolute.

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11506

Demo

js

$(document).ready(function () {
    $("header").before($("header").clone().addClass("animateIt"));
    $(window).on("scroll", function () {
        $("body").toggleClass("down", ($(window).scrollTop() > 100));
    });
});

css

body, html {
    margin:0;
    padding:0;
}
header {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #000;
    color: #fff;
}
header.animateIt {
    position:fixed;
    top:-60px;
    left: 0;
    right: 0;
    z-index:999;
    transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
    top:0;
}
.content {
    padding: 0 20px 20px;
    background: #fff;
    line-height: 1.5;
    color: #333;
}

html

<header>
    <a href="#">1 </a>
    <a href="#"> 2</a>
    <a href="#"> 3</a>
    <a href="#">4</a>
    <a href="#">5</a>    
</header>

Upvotes: 3

Related Questions