1

多数のピクセルがスクロールされた後、ヘッダーの背景がフェードインするようにします。以下のコードを使用すると、ちょっとわかりますが、あまり正しくありません! 何か案が？ありがとう！

$(function () {
    $(window).scroll(function () {
        $(document).scrollTop() > 100 ? $('header').css({
            "background": 1
        }).fadeIn() : $('header').css({
            "background": 0
        }).fadeOut();
    });
})
4

6 に答える 6

3

まず、他の回答で述べたように、カラー アニメーション用に jQuery UI または jQuery Color プラグインを含める必要があります。

第二に、これは単に翼を広げているだけですが、これを古い大学で試してみてください。

$(function(){
    $(window).scroll(function(){
        var $scrollPercent = ($(document).scrollTop() / 100);

        if($scrollPercent <= 1){
            $('header').css({backgroundColor:'rgba(0,0,0,'+$scrollPercent+')'});
        }
    });
});

これにより、ページを下にスクロールする量に基づいて、徐々にフェードインするはずです。これは、下に 50 ピクセルスクロールすると、背景色の不透明度が 50% (下に 50 ピクセル / 高さ 100 ピクセル) に設定されることを意味します。この方法で、下にスクロールして完全な不透明度に到達する高さを簡単に変更することもできます。

編集したがって、100pxの後に色をフェードインしたいだけであることがわかりました...私の段階的なフェードインではありません。問題ありません。

他の人は、それを行う素晴らしい (そしてはるかに優れた) CSS3 の方法を指摘しています...トランジション効果を作成し、スクロールにクラスを追加します。私は彼らの雷を盗むつもりはありませんが、古代のブラウザーにも対応する代替手段を提供します.

上部のヘッダー内に HTML の行を追加します。

<div class="header">
    <div class="headerBackground"></div>
    <!-- other header stuffs -->
</div>

次に、その CSS を次のように設定します。

.header {
    position:relative;
}

.headerBackground {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgb(0,0,0);
    opacity:0;
    filter:alpha(opacity=0); // for IE8 and below
}

次に、次の jQuery を使用します。

$(function(){
    $(window).scroll(function(){
        var $bg = $('.headerBackground');

        if($(document).scrollTop() >= 100){
            $bg.animate({opacity:1},500); // or whatever speed you want
        } else {
            $bg.animate({opacity:0},500);
        }
    });
});

これには、別のライブラリ (jQuery UI / jQuery Color プラグイン) を必要としないという追加の利点もあります。もちろん、欠点は非セマンティック HTML です。私が言ったように、ちょうど別の選択肢です。

于 2013-10-17T15:09:43.800 に答える
2

私は、この種の問題のために 2 つの CSS クラスを作成することを好みます。1 つはウィンドウがスクロールされている場合、もう 1 つはスクロールされていない場合です。

    ヘッダー { 背景: 透明; }
    header.scrolled { 背景: #f2f2f2; }

次に、JavaScript は次のようになります。

    $(関数 () {
      $(window).scroll(関数 () {
        if($(document).scrollTop()>100){
          $('header').addClass('scrolled');
        }
        そうしないと {
          $('header').removeClass('scrolled');
        }
      });
    }))
于 2013-10-17T15:13:21.673 に答える
0

コードは正しいですが、jQuery はカラー アニメーションをネイティブにサポートしていません。そのためにはプラグインまたは jquery-ui が必要です: http://jqueryui.com/animate/

編集:実際には、あなたのコードはちょっと間違っています。backgroundColor を何かに設定したい。background: 1 は無効です css:

そう .css({'backgroundColor': 'red'}) そして .css({'backgroundColor': 'blue'})

于 2013-10-17T15:03:24.487 に答える
0

多くの古いブラウザーをサポートする必要がない場合は、jQuery と css3 トランジションを組み合わせて背景色をアニメーション化できます。

HTML を取得します。

<div id="myBox">Stuff here</div>

そしてJavaScript：

var myBox = $('#myBox');

myBox.on('click', function (el) {

    myBox.css('background-color', 'red');

}

次に要素 #myBox をクリックすると、背景色が赤に変わります。瞬時に、フェードなし。

CSSコードも配置する場合：

#myBox {
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

その後、背景の色の変更は 300 ミリ秒でフェードします。すべての最新バージョンのブラウザで動作しますが、IE 9 以下では動作しません。

于 2013-10-17T15:12:40.573 に答える
0

私が最終的に使用したソリューションは次のとおりです。

スクロール位置に基づいてフェードインおよびフェードアウトするセクションを作成しました。

CSS

.backTex {
    width:100%;
    height:500px;
    margin-top:50px;
    background-color: @myGreen;
    //Height
    transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    //Background-Color
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

jQuery

$(document).scroll(function() {
        var positionScroll = $(this).scrollTop();

        if(positionScroll <= 499) {
            $(".backTex").css("background-color", "#fff");    
        } else if (positionScroll > 500 && positionScroll < 1100) {
            $(".backTex").css("background-color", "#2ecc71");
        } else {
            $(".backTex").css("background-color", "#fff");
        }
    });

互換性に関しては、ブラウザ間の問題はまだありません。何か経験した場合は、私の投稿に返信してください。ありがとう！

于 2016-02-24T05:12:46.340 に答える