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

滚动事件更改徽标大小

1 个答案: