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