Currently, I am implementing a JavaScript feature that allows my logo to shrink when the user scrolls down and grow when they scroll up.
To achieve this effect, I am utilizing the jQuery functions addClass and removeClass.
However, I have encountered some issues along the way.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(function(){
var navStatesInPixelHeight = [65,90];
var changeNavState = function(nav, newStateIndex) {
nav.data('state', newStateIndex).stop().animate({
height : navStatesInPixelHeight[newStateIndex] + 'px'
}, 600);
};
var boolToStateIndex = function(bool) {
return bool * 1;
};
var maybeChangeNavState = function(nav, condState) {
var navState = nav.data('state');
if (navState === condState) {
changeNavState(nav, boolToStateIndex(!navState));
}
};
$('.top_nav').data('state', 1);
$(window).scroll(function(){
var $nav = $('.top_nav');
if ($(document).scrollTop() > 0) {
$('.contact_details').hide();
$nav.addClass('fixed-nav');
$('.top_nav').css('background-color','rgba(33,33,33,1.0)');
maybeChangeNavState($nav, 1);
} else {
$('.contact_details').show();
$nav.removeClass('fixed-nav');
$('.top_nav').css('background-color','rgba(0,0,0,.5)');
maybeChangeNavState($nav, 0);
}
});
});
<header>
<div class="top_nav">
<div class="logo">
<a id="site-logo" href="#"><img src="http://www.robinwhale.co.uk/pages/wisdom/sigs_files/google-logo.jpg" alt="LOGO"></a>
</div>
<div class="contact_details">
<p>Need Help, Call: +92 445676654 |<a href="#"> Mail</a></p>
</div>
<div class="nav_bar">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Solution</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</header>
<div class="container">
</div>
*{
margin: 0;
padding: 0;
}
/* Top Menu Start Here */
.top_nav{
height: 90px;
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.top_nav .logo{
margin-top: 2px;
margin-left: 20px;
height: 75px;
width: 200px;
float: left;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease
}
... (The remaining code has been omitted for brevity) ...