0

我首先想说我是 jQuery 新手。当用户滚动到该点时，我正在使用此脚本为两个 div 的背景颜色设置动画。第一个 div 工作正常，但 #contact 不起作用，因为 #contact 位于距顶部 500% 的位置，因此当我向下滚动 500 像素时会触发动画。我不知道如何将其从像素更改为百分比。

我仅将它与 java UI 的颜色部分和最新版本的 jQuery 一起使用。

另外，我知道这是另一个问题，但是有没有办法在滚动 div 后让它恢复到原始状态，这样如果用户向上滚动，动画会再次触​​发？

JS 小提琴 http://jsfiddle.net/8SWG4/

$(窗口).scroll(函数() {

if($(window).scrollTop() > 500){
$("#contact").stop().animate({
      backgroundColor:  '#fff',
    }, 1000);
}
 else{

$("#about").stop().animate({
      backgroundColor:  '#000',
    }, 1000);     
 }

});
4

2 回答 2

2

您可以使用$(element).offset().top来检测到该元素的滚动传递。

示例演示：http: //jsfiddle.net/yeyene/8SWG4/6/

$(window).scroll(function() { 
    if($(this).scrollTop() >= $("#blog").offset().top){
        $("#contact").stop().animate({
          backgroundColor:  '#000',
        }, 2000);
    }
    if($(this).scrollTop() <= $("#blog").offset().top){
        $("#contact").stop().animate({
          backgroundColor:  '#fff',
        }, 2000);
    }
    if($(this).scrollTop() >= $("#home").offset().top/2){
        $("#about").stop().animate({
          backgroundColor:  '#000',
        }, 2000);     
    }
    if($(this).scrollTop() <= $("#home").offset().top/2){
        $("#about").stop().animate({
          backgroundColor:  '#fff',
        }, 2000);     
    }
});
于 2013-07-08T02:57:15.887 回答
0

500% 不在屏幕上，将无法正常工作。你是说50%还是？你如何将高度传递给你的div？

无论如何，您不能直接在 % 上触发滚动高度，但您可以这样做：

var a = $(document).height();
var a3= Math.floor(a * 0.3);  // 30% 
var a5= Math.floor(a * 0.5);  // 50%
var a8= Math.floor(a * 0.8);  // 80%

我用过$(document).height();，但如果你有一个包装 div，你也可以使用它，比如$('#div_id').height();

要在用户向后滚动时“重新启动”动画，请检查此处。您也可以按照 yeyene 的建议使用$(element).offset().top.

我将您其他问题的代码修改为：

$(window).scroll(function () {
    a = b = c = false;
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > 0 && $(window).scrollTop() < 400) {
        a = true;
    }
    if ($(window).scrollTop() > 399 && $(window).scrollTop() < 900) {
        b = true;
    }
    if ($(window).scrollTop() > 899 ) {
        c = true;
    }
    $("#home").stop().animate({
        backgroundColor: a ? '#00f' : '#fff',
    }, 1000);
    $("#about").stop().animate({
        backgroundColor: b ? '#0f0' : '#fff',
    }, 1000);
    $("#contact").stop().animate({
        backgroundColor: c ? '#f00' : '#fff',
    }, 1000);
});
于 2013-07-08T06:02:42.277 回答