0

まず、ここに私のウェブサイトがあります:私のウェブサイト

ページが下にスクロールされると、ヘッダーの背景色 (ライト グレー) が不透明度 0 から 100% にフェードする方法についてのフィードバックを得たいと思っていました。最初のプロジェクトがヘッダーにヒットする直前に、灰色の背景が既に表示されている可能性があります。

私のプロジェクト ページでは、サイドバーの説明が特定の時点でフェードアウトすることがわかります。私はヘッダーにそれを望んでいますが、最初はdiv全体を非表示にするのではなく、背景色だけを非表示にします。

乾杯！

4

2 に答える 2

2

jQueryを使用して関数をイベントにバインドできますscroll

$(document).bind("scroll", function() {

    var scrollPos = $(window).scrollTop();
    var max = $(document).height() - $(window).height(); // Max avilable scroll position
    var header = $("#header");

    header.css("opacity", scrollPos / max);
    // OR
    header.css("opacity", 1 - (scrollPos / max));
});
于 2013-05-05T08:31:52.640 に答える
0

以前に回答を投稿した@jjurmに感謝し、賛成票を投じてください。これは、少しクリーンでより良い例です。

$(document).bind("scroll", function() {
    var scrolly = $(window).scrollTop();
    var height = $(document).height() - $(window).height();
     $("#header").css("opacity", scrolly / height +.3);
});

変数: scrolly : y 軸でスクロールされたピクセルの量、height: ドキュメントの高さ - ウィンドウの高さ

+.3 は最小の不透明度を維持するため、上にスクロールしてもヘッダーはそのまま残ります。

作業フィドル: http://jsfiddle.net/xDWQa/1/

于 2013-05-05T08:51:56.783 に答える