Rabner Casandara Rabner Casandara - 1 month ago 12
jQuery Question

Logo Didn't Shrink On Scroll Down

i am using javascript to shrink my logo on scroll down and extent on scroll up for this i using jquery function addClass and removeClass but i am getting some troubles please check and help me out from this

<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
}

.top_nav .logo a img{
height: 100%;
width: 100%;
}


.contact_details{
margin-top: 5px;
margin-left: 1115px;
min-height: 25px;
min-width: 230px;
float: right;
color: #fff;
position: absolute;
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;
}

.contact_details p{
font-size: 14px;
text-align: center;
}

.contact_details p a{
text-decoration: none;
color: #fff;
}

.nav_bar{
margin-left: 700px;
margin-top: 55px;
position: absolute;
}

.nav_bar ul{
list-style-type: none;
}

.nav_bar ul li{
display: inline-block;
text-align: center;
float: left;
}

.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
position: relative;
}

.nav_bar ul li a::after{
content: '';
display: inline-block;
position:absolute;
width: 0px;
height: 5px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #ff6600;
transition: width .4s;
}

.nav_bar ul li a:hover::after{
width: 100%;

}

/* After Scroll */

}
.fixed-nav .logo {
height: 40px;
width: 100px;
}
.fixed-nav .logo img {
width: 100%;
}

Answer

Mofidy your css

You have to update logo height on fixed nav

 .top_nav .logo{
    margin-top: 2px;
    margin-left: 20px;
    height: 75px;
    width: 200px;
    float: left;

    /* REMOVE transitions from here */
    /* 
    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 a img {
    transition: all 0.9s ease 0.7s;
}

.fixed-nav .logo img {
    height: 80% !important;
}