2

私が取り組んでいる個人のウェブサイトwww.derekgoss.comがあります (完成にはほど遠いことに注意してください - まだコンテンツ、応答性などが必要です)。下にスクロールして最初のコンテンツ ボックスに到達したら、上部のナビゲーション バーを、fadeIn/Out ではなく、fadeTo(1000, .35)にしたいと思います。同様に、コンテンツ ボックスを超えて上にスクロールしたら、バーを元の不透明度にフェードバックさせたいと思います。さらに、バーがフェードアウトしている場合、ユーザーがマウスを上に置いたときに元の不透明度にフェードバックし、マウスが離れると元に戻りたいと思います。これに似たものは、fadeOut/In メソッドで機能しましたが、fadeTo メソッドを使用しようとすると、機能しなくなりました。既にナビゲーション バーの不透明度を 1 に設定しています。これが私のベスト ショットですが、機能していません。

  $(function(){
   var headertop = $("#aboutheader").offset().top;

   $(window).scroll(function(){
           if( $(window).scrollTop() > headertop ) {
                   $("#navigationbar").fadeTo(1000,.35);

                   $("#navigationbar").hover(
                   function() {
                   $("#navigationbar").fadeTo(500,1);
                   }, function() {
                   $("#navigationbar").fadeTo(1000,.35);
                   }
                   );
           } else {
                   $("#navigationbar").fadeTo(1000, 1);
           }
   }); 
});

どんな助けでも大歓迎です。

4

1 に答える 1

2

http://jsfiddle.net/y2gY8/

コードの問題は、スクロール中にフェードが何度もトリガーされるため、1つずつスタックして起動することでした。私のバージョンは動作しますが、少し最適化される可能性があります。

$(function () {
    var headertop = $("#aboutheader").offset().top;
    var hoveractive = false;
    var fadeout = true;
    var fadein = true;

    $(window).scroll(function () {
        if ($(window).scrollTop() > headertop && fadeout) {
            hoveractive = true;
            fadeout = false;
            fadein = true;
            $("#navigationbar").fadeTo(1000, .35);
        }
        if ($(window).scrollTop() <= headertop && fadein) {
            hoveractive = false;
            fadein = false;
            fadeout = true;
            $("#navigationbar").fadeTo(1000, 1);
        }
    });

    $("#navigationbar").hover(function () {
        if (hoveractive) {
            $("#navigationbar").fadeTo(500, 1);
        }
    }, function () {
        if (hoveractive) {
            $("#navigationbar").fadeTo(500, .35);
        }
    });
});
于 2014-05-13T17:49:25.820 に答える