0
所以,我编写了一个站点,当您向下滚动页面时触发某些事件。我希望当相关元素在视口左右四分之一处点击时触发事件。JavaScript的触发点取决于视口大小
但是,对于不同大小的视口,此触发点明显不同。我已经计算出如何计算这个触发点,但是我还没有找到一种方法来获取div相对于视口/页面顶部的位置。我试图使用.offset(),我可以结合使用getPageScroll()来找到正确的点,但我无法弄清楚它要返回的数组在做什么。我也尝试在变量中弹出它,并使用下面的语法(用在jquery.com文档中),但它显然是错误的,并在控制台中返回Undefined。
我对Javascript和jQuery都很新,对于任何实际的编程都很一般,所以请原谅任何愚蠢。如果我全部倒退,那完全是一个有效的答案!如果是这种情况,请指出我的方向是否正确。
我已经把它编码到目前为止。实际效果只是占位符,现在 - 我只是想获得基本框架的工作:
// getPageScroll() by quirksmode.com - adapted to only return yScroll
function getPageScroll() {
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
return yScroll
}
// Adapted from getPageSize() by quirksmode.com
function getPageHeight() {
var windowHeight
if (self.innerHeight) { // all except Explorer
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowHeight = document.body.clientHeight;
}
return windowHeight
}
var containers = $('div.container');
var element_1 = $('#part_one');
var element_2 = $('#part_two_1');
var element_3 = $('#part_two_2');
var element_4 = $('#part_two_3');
var element_5 = $('#part_two_4');
var element_6 = $('#part_three');
var element_7 = $('#part_four');
var element_8 = $('#part_five');
var docHeight = $(document).height();
$(window).scroll(function() {
var offset = offset();
var docHeight = $(document).height();
var pageBottom = getPageScroll() + getPageHeight();
var quarterPoint = getPageScroll()+((pageBottom-getPageScroll())/4)
var halfwayPoint = getPageScroll()+((pageBottom-getPageScroll())/2)
var threeQuarterPoint = pageBottom-((pageBottom-getPageScroll())/4)
var triggerPoint = quarterPoint-(getPageHeight/10)
if (triggerPoint < element_1.offset.top){
containers.stop().animate({backgroundColor: "white", color: "#aaa"}, 50);
element_1.stop().animate({backgroundColor: "#ffa531", color: "white"}, 300, function(){
$(this).children().stop().animate({opacity: "1"}, 300);
});
};
if (triggerPoint > element_2.offset.top){
containers.stop().animate({backgroundColor: "white", color: "#aaa"}, 50);
element_2.stop().animate({backgroundColor: "#d900ca", color: "white"}, 300, function(){
$(this).children('img').stop().animate({opacity: "1"}, 300);
});
};
if (triggerPoint > element_3.offset(top)){
containers.stop().animate({backgroundColor: "white", color: "#aaa"}, 50);
element_3.stop().animate({backgroundColor: "#d900ca", color: "white"}, 300);
};
等等等等,某处12之间的8和触发点。
任何帮助将不胜感激!
的人了吧!现在工作非常顺利。非常感谢! – 2011-03-09 16:58:27