2

ユーザーがページを下にスクロールし始めたときに、jQuery ウェイポイントを使用してヘッダーのスタイルを変更しています。ただし、ヘッダーが画面の上部に戻ったときにヘッダーを自然なスタイルに戻そうとするときに苦労しています。つまり、ユーザーがスクロールして上部に戻ります。

$(document).ready(function(){
       $('.slide-wrap').waypoint(function() {
           $("#header").animate({backgroundColor: 'black'},2000,function(){
               bgColor = 'black';
           }) 
        });             
});

私は現在これを持っていますが、ページを下にスクロールするとうまくいきます。

任意の支援をいただければ幸いです。

どうもありがとう

4

2 に答える 2

3

@jimy の回答に基づいて構築するには、ウェイポイント コールバックに Event オブジェクトと方向を示す文字列を指定します。その方向文字列を使用して、どの色に向かってアニメートする必要があるかを判断します。

$('.slide-wrap').waypoint(function(event, direction) {
  var color = direction === 'down' ? 'black' : 'yourOriginalColor';
  $('#header').stop().animate({ backgroundColor: color }, 2000);
});

更新: Waypoints 2.0 はイベント オブジェクトを渡さず、方向文字列のみを渡します。

$('.slide-wrap').waypoint(function(direction) {
  var color = direction === 'down' ? 'black' : 'yourOriginalColor';
  $('#header').stop().animate({ backgroundColor: color }, 2000);
});
于 2012-07-25T16:57:03.210 に答える
-1

これを試すことができます

var headercolor = $("#header").css("background-color");
$('.slide-wrap').waypoint(function(event, direction) {
   if (direction === 'down') {
      $("#header").animate({backgroundColor: 'black'},2000,function(){
          bgColor = 'black';
      });
   }
   else {
       $("#header").animate({backgroundColor: headercolor},2000,function(){
          //bgColor = 'black';
      });
   }
});
于 2012-07-25T14:47:24.530 に答える