javascript 的触发点取决于视口大小

Question

所以，我正在编写一个网站，该网站在您向下滚动页面时会触发某些事件。我希望在相关元素到达视口下方大约四分之一的点时触发事件。

但是，对于不同大小的视口，这个触发点显然是不同的。我已经想出了如何计算这个触发点，但我还没有找到一种方法来获取一个 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 个触发点。

任何帮助将不胜感激！

Answer 1

我在这里看到的几件事：

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