Триггерные точки для JavaScript в зависимости от размера области просмотра - PullRequest
Новая
       33

Триггерные точки для JavaScript в зависимости от размера области просмотра

0 голосов
/ 09 марта 2011

Итак, я кодирую сайт, на котором происходят определенные события, когда вы прокручиваете страницу вниз.Я хочу, чтобы события запускались, когда соответствующий элемент попадает в точку примерно на четверти пути вниз по области просмотра.

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

1 Ответ

0 голосов
/ 09 марта 2011

Пара вещей, которые я вижу здесь: 

var offset = offset(); // i don't believe this is a global function.

if (triggerPoint < element_1.offset.top) { // offset needs to be offset(), its a function not a property
...