Изменить размер логотипа на событиях прокрутки

Question

Я использую JavaScript, чтобы сжать свой логотип на прокрутке вниз и расти на прокрутке вверх.

Я использую функции jQuery addClass и removeClass.

Я получаю некоторые проблемы.

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

Mofidy ваш CSS

Вы должны обновить высоту логотипа на фиксированной нав

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