Only add child element below the fold threshold and parent elements o…

…nly below the fold

src/BeaconLrc.js

@@ -52,7 +52,7 @@ class BeaconLrc {
     _getElementDistance(element) {
         const rect = element.getBoundingClientRect();
         const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        return rect.top + scrollTop - (window.innerHeight || document.documentElement.clientHeight);
+        return Math.max(0, rect.top + scrollTop - (window.innerHeight || document.documentElement.clientHeight));
     }
 
     _skipElement(element) {
@@ -78,11 +78,12 @@ class BeaconLrc {
             if (this._shouldSkipElement(element, this.config.exclusions || [])) {
                 return;
             }
-            if ( 'No hash detected' !== hash ) {
-                this.lazyRenderElements.push( hash );
+
+            if ( 'No hash detected' === hash ) {
+                return;
             }
 
-            const style = distance > 1800 ? 'color: green;' : distance === 0 ? 'color: red;' : '';
+            const style = (depth === 2 && distance >= 1800) || (element.parentElement && this._getElementDistance(element.parentElement) === 0 && distance >= 1800) ? "color: green;" : distance === 0 ? "color: red;" : "";
             console.log(`%c${'\t'.repeat(depth)}${element.tagName} (Depth: ${depth}, Distance from viewport top: ${distance}px)`, style);
 
             const xpath = this._getXPath(element);
@@ -91,6 +92,19 @@ class BeaconLrc {
             console.log(`%c${'\t'.repeat(depth)}Location hash: ${hash}`, style);
 
             console.log(`%c${'\t'.repeat(depth)}Dimensions Client Height: ${element.clientHeight}`, style);
+
+            // Check if the element is a parent at depth 2 with distance >= 1800
+            if (depth === 2 && distance >= 1800) {
+                this.lazyRenderElements.push(hash);
+                console.log(`Parent element at depth 2 with distance >= 1800 pushed with hash: ${hash}`);
+                return;
+            }
+
+            // Check parent element with distance of 0 but children is within threshold.
+            if (element.parentElement && this._getElementDistance(element.parentElement) === 0 && distance >= 1800) {
+                this.lazyRenderElements.push(hash); // Push the child's hash
+                console.log(`Child element pushed with hash: ${hash}`);
+            }
         });
     }