0

デザインの上部に 2 層の定位置ナビゲーションを計画しています。

ユーザーがページを下にスクロールすると、最初の層がほとんど隠れるまでナビゲーションを上にスライドさせたいと思います。

その後、ユーザーがナビゲーションにカーソルを合わせると、コンテナーが下にスライドして、最初の層が再び表示されます。

ユーザーがブラウザ ウィンドウの一番上にいる場合、このホバー効果は発生しません。

さらに、ユーザーがページの一番上までスクロールして戻ると、最初の読み込み時のように、完全な 2 層ナビゲーションが再び完全に表示されるはずです。

CSS3 transitionsJavaScript を使用してこれらのイベントを連鎖させるのに問題があり、と jQueryaddClass/removeClass呼び出しの組み合わせに頼らなければなりませんでした。

さらに、ミッシュマッシュ全体を一度しか発射できません。したがって、ユーザーが下にスクロールして上に戻ると、アニメーションはなくなります。

私の現在のコードは、このフィドルで表示できます

うまくいけば、これは私がやろうとしていることのアイデアを与える.

この怪物に命を吹き込むのを手伝ってくれる人はいますか？

コードは次のとおりです。

HTML

<div id="nav_wrap">
    <div id="nav_one">
        <h2>Nav One</h2>
    </div>
    <div id="nav_two">
        <h3>Nav Two</h3>
    </div>
</div>
<p>blah blah blah etc...</p>

CSS

#nav_wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 100;
}

#nav_one,
#nav_two {
    float: left;
    width: 100%;
    height: 48px;
    background: #111;
}

#nav_two {
    background: #1f4c6b;
    height: 72px;
}

h2, h3 {
    color: #fff;
}

#nav_wrap.fixed {
    margin-top: -42px;
    -webkit-transition: margin-top .5s ease-in-out;
    box-shadow: 0 0 24px #111;
}

#nav_wrap.down {
    margin-top: 0px;
    -webkit-transition: margin-top .5s ease-in-out;
}

#nav_wrap.drop {
    top: 42px;
    -webkit-transition: top .5s ease-in-out;
}

#nav_wrap.up {
    top: 0;
    -webkit-transition: top .5s ease-in-out;
}

Javascript

var top = $('#nav_wrap').offset()
                        .top - parseFloat($('#nav_wrap')
                        .css('marginTop')
                        .replace(/auto/, 0));

$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y > top) {
        $('#nav_wrap').addClass('fixed');
        $("#nav_wrap").hover(
            function () {
                $(this).addClass('drop');
            },
            function () {
                $(this).addClass('up');
            }
        );

    } else if (y == 0) {

        $('#nav_wrap').addClass('down');

    }
});
4

1 に答える 1

2

あなたはあなたのアプローチを過度に複雑にしています。実際に行う必要があるのは、JavaScript でスクロール時に 1 つのクラスを切り替えることだけです。この CSS が残りの作業を行います。

注: コードには、他のブラウザー用にプレフィックス (-moz、-o、-ms) を追加する必要がありますaddClass。イベントが頻繁に呼び出されるため、スクロールでの呼び出しの一部のパフォーマンスを改善することを検討します。

フィドルの例はここにあります。

CSS 

#nav_wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 100;
}

#nav_one,
#nav_two {
    width: 100%;
    height: 48px;
    background: #111;
}

#nav_two {
    background: #1f4c6b;
    height: 72px;
}

h2, h3 {
    color: #fff;
}

#nav_wrap{
    -webkit-transition: margin-top .5s ease-in-out;
}

#nav_wrap.scroll {
    margin-top: -42px;
    box-shadow: 0 0 24px #111;
}

#nav_wrap.scroll:hover{
    margin-top: 0px;
}

JS 

$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y > 0) {

        $('#nav_wrap').addClass('scroll');
    } 
    else{

        $('#nav_wrap').removeClass('scroll');
    }
});
于 2013-02-01T14:23:00.980 に答える