CODEWITHSUNDEEP
javascriptjquerycss
Cyrill
Cyrill

Reputation: 833

Animate menu bar on scrolling window

Let's say, I have a navigation div like this:

  #navigation {
      position:fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 80px;
      background-color: #FFF;
      z-index:999;
      padding-top: 25px;
      padding-left: 45px;
  }

If the user scrolls I want to behave it like it would be position:absolute, so that it disappears in the top of the browser window. But after a short delay I want it to slide from the top back in to its old position. How can I realize this with JS?

Thank You!

Upvotes: 2

Views: 1324

Answers (3)

Academia
Academia

Reputation: 4124

Check this link jsfiddle to see a working example. the code is the one below: HTML:

<div id='wrapper'>
    <div id='navigation'>
    </div>
</div>

CSS:

#wrapper{
    height: 600px;
}
#navigation {
  position:fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 80px;
  background-color: black;
  z-index:999;
  padding-top: 25px;
  padding-left: 45px;
  }

jQuery/javascript:

$('#wrapper').bind('mousewheel',function(e){
    if ($('#navigation').is(':animated')){
        return false;
    }
    if(e.originalEvent.wheelDelta < 0) {
        $('#navigation').animate({
            top:'-' + $('#navigation').innerHeight(),
        }).delay(1200).animate({
            top: '0px',
        });
    }
});

The wheelDelta property returns an integer value indicating the distance that the mouse wheel rolled. A negative value means the mouse wheel rolled down.

Hope it useful!

Upvotes: 0

Moshtaf
Moshtaf

Reputation: 4903

Try this:

var isInAction = false;
$(window).scroll(function () {
    if (!isInAction){
        isInAction = true;
        $( "#navigation" ).animate({
            top: "-" + $("#navigation").innerHeight() + "px"
        }).delay(1000).animate({
            top: "0px"
        }, 800, function() {
            isInAction = false;
        });;
    }
});

You can change .delay(1000) to change the delay time.
The isInAction var is defined to prevent repeating animation when you scroll constantly.

Check JSFiddle Demo


Update:

If you want to restrict this action only on scroll down, So modify code like this:

var isInAction = false;
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       if (!isInAction){
           isInAction = true;
           $( "#navigation" ).animate({
               top: "-" + $("#navigation").innerHeight() + "px"
           }).delay(1000).animate({
               top: "0px"
           }, 800, function() {
               isInAction = false;
           });
       }
   }
   lastScrollTop = st;
});

Check JSFiddle Demo

Upvotes: 2

Stuart Miller
Stuart Miller

Reputation: 657

If you use position:absolute to position the element then you can use:

var windowTop = $('body').scrollTop;

Will give you the offset from the top of the page that the window is currently displaying.

$('#element').css('top', windowTop + 'px');

Will set the element to that position

Upvotes: 0

Related Questions