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


    }; 

等等等等，某處12之間的8和觸發點。

任何幫助將不勝感激！

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