Question

当用户开始向下滚动页面时，我正在使用jQuery waypoints来改变标题的样式。然而，当我回到屏幕顶部时，我试图让标题返回其自然风格时遇到困难，即：用户滚动回到顶部。

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

到目前为止，我目前已经有了这个，滚动页面时工作正常。

任何帮助表示赞赏。

非常感谢

Answer 1

为了构建@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);
});

Answer 2

你可以试试这个

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';
      });
   }
});

jQuery航点

2 个答案: