jQuery(element).offset().top temporarily inaccurate when scrolling

109
September 02, 2019, at 1:50 PM

I am trying to fire events once an element comes into view, for a few different elements at different places in the page. I am using a utility function from another StackExchange answer to handle determining when Element A or Element B comes into view, specifically using jQuery(element).offset().top to determine when the element is in view. In this example, let's assume Element A is higher in the page, so it should be seen first, followed down the page by Element B.

When Element A comes into view, the code for Element A fires as expected, but Element B also fires, even though it's ~1000 down the screen and completely out of view. jQuery(element).offset().top for Element B returns a number ~1400 less than the actual placement of Element B for a few seconds after Element A triggers, it then corrects itself after scrolling a bit further

I've tried tracking the variables in the Console and using both jQuery(element).offset().top; and jQuery(element).position().top; but have had no luck.

The utility function I am using to do so is this:

function Utils() {
  }
Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = jQuery(window).scrollTop();
        var pageBottom = pageTop + jQuery(window).height();
        var elementTop = jQuery(element).offset().top;
        var elementBottom = elementTop + jQuery(element).height();
        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementBottom >= pageTop) && (elementTop <= pageBottom));
        }
    }
};
var Utils = new Utils();

I am calling the function like so:

var xyz = Utils.isElementInView(ElementA, false);
              if(xyz) { then do stuff }
var zzz = Utils.isElementInView(ElementB, false);
              if(zzz) { then do stuff }

When I track the elementTop for Elements 1/2 and PageBottom in the console I am seeing this happen:

(index):1237 elementTop : 4499 - Element 1 Top
(index):1235 PageBottom: 4496
(index):1237 elementTop : 5454 - Element 2 Top
(index):1235 PageBottom: 4499
(index):1237 elementTop : 4499 - Element 1 Top
(index):1302 Event Firing for Element 1
(index):1235 PageBottom: 4499
(index):1237 elementTop : 4148 - Element 2 Top
(index):1310 Event Firing for Element 2
(index):1235 PageBottom: 4500
(index):1237 elementTop : 4149 - Element 2 Top
(index):1310 Event Firing for Element 2
(index):1235 PageBottom: 4501
(index):1237 elementTop : 5454 - Element 2 Top

When I get around when Element 1 comes into view (4499), the top returned for Element 2 is 5454. Immediately when Element 1 comes into view, Element 2 also fires because the top returned for Element 2 becomes 4148. The top for Element 2 corrects itself after a bit of scrolling and is back to 5454.

Any ideas on why this is happening?

READ ALSO
How remove all elements from a page which contain specific class

How remove all elements from a page which contain specific class

I would like to print off my LinkedIn profile (https://wwwlinkedin

124
&ldquo;Tri-state&rdquo; checkboxes for product filtering [on hold]

“Tri-state” checkboxes for product filtering [on hold]

I should state that indeed I didn't do any major research on my problem, except for Googling the terms "tri-state checkboxes", which returned some companies (LOL); and "filter include exclude unspecified", which didn't return anything usable either

91
Customize own page depending on iFrame content? [on hold]

Customize own page depending on iFrame content? [on hold]

I would like to include a Spreadshirt Shop (Affiliate) on my websiteFor this I would like to integrate the Creator Tool and the shopping cart, this works so far as well

83