Question

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

我只使用java UI的颜色部分和最新版本的jQuery。

另外，我知道这是另一个问题，但是有一种方法，一旦你滚过div，它会回到原来的状态，这样如果用户向上滚动，动画会再次触发？

JS FIDDLE http://jsfiddle.net/8SWG4/

$（window）.scroll（function（）{

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

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

});

Answer 1

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

示例DEMO：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);     
    }
});

Answer 2

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

制作动画＆＃34;重新开始＆＃34;当用户向后滚动时检查here。您也可以使用$(element).offset().top做yeyene的建议。

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

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

jquery ScrollTop动画百分比不是像素

2 个答案: