1

この種の効果に CSS3 を使用することは可能だと思いますか? ナビゲーションバーでこのようなことを達成しようとしています。http://garypeppergirl.com/ユーザーが下にスクロールすると、ナビゲーションのスタイルが変わることがわかりますか? サンプルサイトだと高さが変わるんですけど… ドロップシャドウが欲しいです D: CSS3で出来ないなら… JavascriptやJqueryでどうやったら出来るか分かりますか？誰か助けてください。ありがとうございました！

4

1 に答える 1

4

jQuery のscrollTop()メソッドを使用して、スクロールした距離を判断できます。

var distance  = $(window).scrollTop();

その後、イベントと組み合わせて使用​​し.scroll()、ナビゲーションにクラスを追加できます。box-shadow次に、プロパティを使用して新しいクラスのスタイルを設定できます。

var nav = $('#nav'); // Change to nav div
var nav_class = 'mini-nav'; // Change to class name
var threshold = 100; // Change to pixels scrolled

$(window).scroll(function () {
    var distance = $(this).scrollTop();
    if (distance > threshold) { // If scrolled past threshold
        nav.addClass(nav_class); // Add class to nav
    } else { // If user scrolls back to top
        if (nav.hasClass(nav_class)) { // And if class has been added
            nav.removeClass(nav_class); // Remove it
        }
    }
});

始めるためのフィドルは次のとおりです。

http://jsfiddle.net/X967T/5/

于 2013-08-29T16:10:22.293 に答える