列表項目位置在滾動上不會更改

Question

我正在使用javascript縮小向下滾動我的標誌和向上滾動爲此我使用jquery函數addClass和removeClass但我遇到一些麻煩請檢查並幫助我從這

1）標誌是延伸的第一則top_nav
2）列表項目的立場是不會改變

<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'); 
     $nav.addClass('fixed-navbar'); 
     $('.top_nav').css('background-color','rgba(33,33,33,1.0)'); 
     maybeChangeNavState($nav, 1); 
    } else { 
     $('.contact_details').show(); 
     $nav.removeClass('fixed-nav'); 
     $nav.removeClass('fixed-navbar'); 
     $('.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: 85px; 
    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: fixed; 
} 

.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-navbar{ 
    margin-left: 100px; 
    margin-top: 30px; 
    position: fixed; 
} 


.fixed-nav .logo { 
    height: 60px; 
    width: 160px; 
} 

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

.top_nav .logo a img { 
    transition:all 0.7s ease; 
} 

Answer 1

我不是太瞭解你已經寫了過渡的CSS，但您可以通過動畫.logo高度解決您的問題寬度以及頂部邊距.nav_bar隨着.top_nav

刪除CSS

.fixed-nav .logo { 
    height: 60px; 
    width: 160px; 
} 

隨着動畫.top_nav動畫徽標和導航欄在changeNavState功能

var navStatesInPixelHeight = [65,90]; 
var newStateLogoPixelHeight = [60,85]; 
var newStateLogoPixelWidth = [160,200]; 
var newStateNavBarPixelTopMargin = [35,55]; 


    var changeNavState = function(nav, newStateIndex) { 
     nav.data('state', newStateIndex).stop().animate({ 
      height : navStatesInPixelHeight[newStateIndex] + 'px', 
     },600); 

     $('.logo').animate({ 
      height :newStateLogoPixelHeight[newStateIndex]+'px', 
      width: newStateLogoPixelWidth[newStateIndex]+'px', 
     }, 600); 

     $('.nav_bar').animate({ 
      marginTop : newStateNavBarPixelTopMargin[newStateIndex]+'px' 
     },1200); 
    };