Question

我创建了一个小功能，可以减少填充（用于菜单项）和高度（徽标）等元素的值，以便在页面滚动时导航栏的高度会降低。

我目前所写的内容如下：

$(window).scroll(function() {

    var scroll      = $(this).scrollTop();
    var navLink     = $('.navbar-nav > li > a');
    var navbar      = $('.navbar');
    var social      = $('.social');
    var language    = $('.navbar-right li span');
    var navImage    = $('.navbar-brand img');

    var heightDefault   = '75px';
    var paddingDefault  = '27px';
    var heightNew       = '50px';
    var paddingNew      = '15px';       

    if (scroll > 200) {

        navLink.stop().animate({
            paddingTop: paddingNew,
            paddingBottom: paddingNew
        });
        navbar.stop().animate({
            height: heightNew
        });
        social.stop().animate({
            paddingTop: paddingNew,
            paddingBottom: paddingNew
        });
        language.stop().animate({
            lineHeight: heightNew
        });
        navImage.stop().animate({
            height: heightNew
        });     

    }

});

为了进行一些优化，我将值和元素定义为变量，但正如您所看到的，我运行了5个独立的动画函数。除此之外，我还有5个独立的动画函数，可以在向上滚动时将值恢复为默认值。

这很可能不是最佳方法，因为它还包括.stop()。

为了更好地优化，我最好将所有元素变量包装在一个数组中，然后运行一个.each()循环，其中包含1 animation()吗？

或者会有更有效的方法吗？如果是这样，有人能够指出我正确的方向吗？

这是一个JSFiddle，展示了我为实时预览所做的更简化版本。

Answer 1

为了更好地对此进行优化，您可能希望减少这些动画启动的次数。停止（使用scroll事件处理程序将导致对代码的大量调用。）

我建议实施与the underscore.js throttle() function类似的内容。

此外，将jQuery选择器移到scroll事件处理程序之外应有助于提高性能。

最后，如果您的用例可能，您应该考虑完全删除jQuery animate()功能＆amp;改为使用基于CSS的动画。

Answer 2

我使用CSS过渡，你得到的代码越少越好。

＆＃13;

jQuery(document).ready(function($) {            
    $(window).scroll(function() {  
        var scroll 		= $(this).scrollTop();
        var nav 		= $('.nav');
          
        if (scroll > 200) {
            nav.addClass('second-state');
                   
        } else {    
           nav.removeClass('second-state');
            
        }
    });
    
});

＆＃13;

.navbar {
    height: 75px;
}
.nav {
    background: #333;
    height: 75px;
    width: 100%;
    position: fixed;
    transition: height .35s;
}
.nav li {
    float: left;
    list-style: none;
}
.nav li a {
    padding: 20px 25px;
    color: #FFF;
    line-height: 20px;
    vertical-align: middle;
    transition: padding .35s;
}

.nav.second-state{
    height: 50px;
}

.nav.second-state li a{
    padding-top: 15px;
    padding-bottom: 15px;    
}

.long {
     height: 1000px;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="long">
    <div class="navbar">
        <ul class="nav">
            <li><a href="#">ITEM 1</a></li>
            <li><a href="#">ITEM 2</a></li>
            <li><a href="#">ITEM 3</a></li>
        </ul>
    </div>
</div>

＆＃13;

滚动时jQuery动画导航栏高度

2 个答案: