Question

我有一个使用bootstrap构建的网站，我正在尝试缩小导航，调整徽标大小，并从左侧浮动导航，同时在用户滚动超过650px时在两个方向上设置动画。这就是我所拥有的，它看起来很麻烦，缺乏大多数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内部都有基于它的特殊设置。

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

1 个答案: