当用户开始向下滚动页面时,我使用 jQuery 路径点来更改标题的样式。然而,当我试图让标题返回到屏幕顶部时恢复其自然样式时,我很挣扎,即:用户滚动回顶部。
$(document).ready(function(){
$('.slide-wrap').waypoint(function() {
$("#header").animate({backgroundColor: 'black'},2000,function(){
bgColor = 'black';
})
});
});
到目前为止,我已经有了这个,向下滚动页面时效果很好。
感谢任何帮助。
非常感谢
最佳答案
为了建立@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);
});
关于jQuery 路径点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11652193/