jquery - 有没有更好的方法来解决这个 jquery 函数

Question

我有一个使用 bootstrap 构建的网站，我正在尝试缩小导航、调整 Logo 大小以及从左向右浮动导航，同时当用户滚动超过 650 像素时在两个方向上为其设置动画。这是我所拥有的，它看起来很麻烦并且缺乏大多数 jquery 函数的简单优雅。对于小于 979px 的窗口大小，是否有比我所做的更好的方法来禁用此功能。

.js

$(window).scroll(function() {
        var windowsize = $(window).width();
        if (windowsize > 979) {
            var sc = $(window).scrollTop()
            if (sc < 650) {
                $("#logoMain").addClass('logoLarge').removeClass('logoSmall')
                $("#mainNav").removeClass('pull-right')
                $(".navbar .nav").css("margin-top", "155px")
                $("body").css("padding-top", "155px")

            } else {
                $("#logoMain").addClass('logoSmall').removeClass('logoLarge')
                $("#mainNav").addClass('pull-right')
                $("#fixedbar").animate({
                    height : "=85px"
                }, 3000);
                $(".navbar .nav").css("margin-top", "35px")
                $("body").css("padding-top", "0px")

            }
        }
    }); 

.css

 .logoLarge {
width: 160px;
height: 160px;
margin-top: 16px;
}

.logoSmall {
width: 50px;
height: 50px;
margin-top: 16px;   
 }

 #logoMain, #fixedbar, #mainNav {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.html

<div class="navbar navbar-fixed-top">
        <div id="fixedbar" class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="brand" href="index.php"><img src="logo.jpg" id="logoMain" class="logoLarge"/></a>
                <div class="nav-collapse collapse">
                    <ul id="mainNav" class="nav navCustom menu">
                        <li class="active">
                            <a href="#about">About</a>
                        </li>

                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>

Answer 1

您可以通过使用 div 包装器在 css 中添加更多内容，然后立即更改所有内容。

像这样http://jsfiddle.net/Pfja2/

.wrapper1 #inside
{
    color: #FF0000;
}

.wrapper2 #inside
{
    color: #0000FF;
    font-weight: bold;
}

基本上，您只需更改包装器的类，并且内部的每个 div 都有基于此的特殊设置。