Итак, я кодирую сайт, на котором определенные события запускаются при прокрутке страницы вниз. Я хочу, чтобы события запускались, когда соответствующий элемент попадает в точку примерно на четверть пути вниз по области просмотра.
Однако эта триггерная точка, очевидно, различна для видовых экранов разного размера. Я придумал, как рассчитать эту точку срабатывания, но не нашел способа получить положение 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);
};
и так далее и тому подобное, где-то между 8 и 12 триггерными точками.
Любая помощь будет принята с благодарностью!