4

このウェブサイトと同じヘッダーのフェードイン/フェードアウト効果を実現しようとしています: http://www.shopstyle.com/

Web サイトにアクセスして下にスクロールすると、最初のヘッダーが透明であることがわかりますが、特定の数のピクセルを下にスクロールすると、CSS は無地の背景に切り替わります。これはjquery/jsを介して行われますか、それともCSS3を介して可能ですか?

ありがとうございました

4

3 に答える 3

10

CSS はスクロール トップを選択できないため、CSS だけでは不可能です。ただし、JavaScriptを介して行うのは非常に簡単です。

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
        $("#header").addClass("not-transparent");
    }
    else {
        $("#header").removeClass("not-transparent");
    }
});
于 2013-11-12T20:36:50.737 に答える
2

jQuery Waypointsプラグインを使用headerして、特定のスクロール位置/オフセットでクラスの変更をトリガーします。ここには、この目的専用のウェイポイント (スティッキー要素) の拡張もあります。CSS3 トランジション/アニメーションまたは jQuery UI クラス変更アニメーションのいずれかでアニメーション化できます。

リンクしたサイトと同様にアニメーション化するスティッキーヘッダーを持つ最近作成したサイトから、これは私がその機能に使用したすべての JS です。

$('.header-wrap').waypoint('sticky', {
    stuckClass: 'stuck',
    offset: -1
});

offset: -1.header-wrap要素の上部がウィンドウに関連してヒットすると、変更がトリガーされることを意味し-1pxます（つまり、基本的にウィンドウがスクロールさ-200れると、ウィンドウが200pxスクロールされるまで起動しません）。

クラスのstuck変更は、透明度、アニメーション、位置などのすべてを処理します。

于 2013-11-12T20:37:20.173 に答える
0

JavaScript と CSS3 を組み合わせるとうまくいくはずです。本質的に必要なことは、$(window).scroll イベントをリッスンし、特定の y オフセットでクラス (例: fill) をヘッダーに追加することです。

.header { transition: all 1s; }
.header.fill { background-color:rgba(0,0,0,.25); }
于 2013-11-12T20:38:06.310 に答える