javascript - 列表项位置在滚动时不变

Question

我正在使用 javascript 在向下滚动时缩小我的 Logo 并在向上滚动时缩小我的 Logo 为此我使用 jquery 函数 addClass 和 removeClass 但我遇到了一些麻烦请检查并帮助我解决这个问题

1) logo先延伸然后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

我不太了解你写的 transition css，但你可以通过动画化 .logo 高度和宽度以及 .nav_bar 的上边距来解决你的问题连同 .top_nav

移除 CSS

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

在 changeNavState 函数中连同动画 .top_nav 动画 Logo 和导航栏

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