3

我有一个用引导程序构建的网站，我试图缩小导航，调整徽标大小，并从左向右浮动导航，同时在用户滚动超过 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>
4

1 回答 1

1

您可以通过 div 包装器将更多内容放入 css 中，然后立即更改所有内容。

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

.wrapper1 #inside
{
    color: #FF0000;
}

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

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

于 2013-07-25T02:00:32.613 回答