3

ブートストラップで構築されたサイトがあり、ナビゲーションを縮小し、ロゴのサイズを変更し、ナビゲーションを左から右に浮かせようとしています。ユーザーが 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>
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 に答える