jquery - jQuery 航点

Question

当用户开始向下滚动页面时，我正在使用 jQuery 航点来更改标题的样式。但是，当我试图让标题返回到屏幕顶部时返回其自然样式时，我很挣扎，即：用户滚动回顶部。

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

到目前为止，我目前有这个，在向下滚动页面时可以正常工作。

任何帮助表示赞赏。

非常感谢

Answer 1

为了建立@jimy 的答案，航点回调被赋予了事件对象和一个指示方向的字符串。使用该方向字符串来确定您应该向哪种颜色设置动画：

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