jquery ScrollTop动画百分比不是像素

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

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

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

JS FIDDLEhttp://jsfiddle.net/8SWG4/

$（窗口）.scroll（函数（）{

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

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

});

来源

2013-07-08 user1820262

您可以使用$(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-08 02:57:15 yeyene

有没有办法消退的背景下，不设置警告：

我从您的其他问题，以适应代码？我试图使用#about部分的代码，但它似乎并没有工作。是否有可能编辑你的答案，使#about的作用与联系人一样，但我想让他们淡入淡出不同的颜色。非常感谢你 – user1820262

检查我的更新答案并再次演示，http://jsfiddle.net/yeyene/8SWG4/4/ – yeyene

谢谢你！最后，它的工作。有没有办法在#contact进入视口时设置动画，而不是当div顶部到达页面顶部时？我说这是因为它是在页面底部的div权利 – user1820262

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

当用户滚动检查here时，让动画“重新开始”。你也可以做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-08 06:02:42 Rikard

jquery ScrollTop动画百分比不是像素

回答

相关问题