CODEWITHSUNDEEP
jquerynavigationfixed
ghilton
ghilton

Reputation: 127

Fixed Nav Menu - How to animate in and out using javascript?

I am trying to created a fixed navigation menu that appears when the user scrolls past 500px, and disappears as the user scrolls back up the page.

However, I don't want it to just appear and disappear, but to animate in and out in a sliding motion.

I found part of the answer to this question on Stackoverflow (link). JSFiddle solution: http://jsfiddle.net/k3AHM/1/

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

if (500 < $(window).scrollTop() && !scrolled) {
    nav.addClass('visible').animate({ top: '0px' });
    scrolled = true;
}

if (500 > $(window).scrollTop() && scrolled) {
    nav.removeClass('visible').css('top', '-30px');
    scrolled = false;      
}

The above code works to the extent that the fixed nav menu animates into view when user goes past 500px. However, I need the menu to animate out again as the user scrolls back up the screen instead of just disappearing instantly.

I would be very grateful if anyone can suggest changes to the javascript which allow the menu to animate both in and out?

Thank you!

Upvotes: 1

Views: 4017

Answers (3)

Gnanasekar S
Gnanasekar S

Reputation: 1890

There is not need to use any javascript or its libraries you can achieve this using bootstrap build in data attribute and with some css.

LOL. It will look weird while you run in mobile width.

<html>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
	.affix {
		width: 100%;
		top: -57px;   /*Will be hidden in top since -57px. Remember same px*/
		margin-top: 57px;  /*Will take 0.2 seconds make a top marigin*/
	  }
	.navbar {
		-moz-transition: margin .2s linear;
		-o-transition: margin .2s linear;
		-webkit-transition: margin .2s linear;
		transition: margin .2s linear;
	}
</style>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div style="min-height: 2500px">test</div>
  
</html>

Upvotes: 0

Girish Sakhare
Girish Sakhare

Reputation: 763

Animate have different overload that can help you to animate the way you want with slide from left or from right with delays.

Please refer http://www.w3schools.com/jquery/jquery_animate.asp

In your case just animate while removing the visible class so that it will not disappear instantly.

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

 if (500 < $(window).scrollTop() && !scrolled) {
    nav.addClass('visible').animate({ top: '0px' });
    scrolled = true;
 }

 if (500 > $(window).scrollTop() && scrolled) {
    nav.animate({ top: '-30px'}, 500);
    scrolled = false;      
 }
});

Above you can see I have specified 500 for delay to make it invisible slowly. Please use any value based on your delay requirement.

Upvotes: 2

spacebean
spacebean

Reputation: 1554

You could do something like:

http://jsfiddle.net/k3AHM/4/

 if (500 > $(window).scrollTop() && scrolled) {
   //animates it out of view
   nav.animate({ top: '-30px' });  
   //sets it back to the top
    setTimeout(function(){
       nav.removeClass('visible');
    },500);
    scrolled = false;      
}

Upvotes: 2

Related Questions