I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example:
My goal is to have #small-menu replace #big-menu once the user starts scrolling.
Check out this JSFiddle for more information: JSFiddle
<div id="container">
<div id="big-menu">
<div id="big-logo">Big Logo</div>
<div id="big-navigation">Navigation</div>
<div id="big-search-bar">Search</div>
</div>
<!--<div id="small-menu"> ---Small Menu I want to replace the big menu with when user scrolls down---
<div id="small-logo">Small Logo</div>
<div id="small-navigation">Navigation</div>
<div id="small-search-bar">Search</div>
</div>-->
<div id="content"></div>
</div>
#container {
width: 600px;
border: 1px solid green;
padding: 10px;
}
#big-menu {
height: 100px;
border: 1px solid red;
}
#big-logo {
width: 100px;
height: 80px;
border: 1px solid blue;
margin-top: 10px;
float: left;
}
#big-navigation {
width: 300px;
height: 20px;
border: 1px solid orange;
float: left;
margin: 70px 0 0 10px;
}
#big-search-bar {
width: 150px;
height: 20px;
border: 1px solid pink;
float: right;
margin: 70px 10px 0 0;
}
#small-menu {
height: 60px;
border: 1px solid teal;
}
#small-logo {
height: 60px;
width: 60px;
float: left;
border: 1px solid red;
}
#small-navigation {
width: 300px;
height: 20px;
border: 1px solid black;
margin: 30px 0 0 10px;
float: left;
}
#small-search-bar {
width: 150px;
height: 20px;
border: 1px solid aqua;
float: right;
margin: 30px 10px 0 0;
}
#content {
height: 1200px;
margin-top: 10px;
border: 1px solid purple;
}
$(function() {
// Stick the #nav to the top of the window
var nav = $('#big-menu');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});