changes to blocks and styles

script.js

@@ -1,3 +1,6 @@
+
+
+
 document.addEventListener('DOMContentLoaded', function () {
     // Get references to the DOM elements
     const header = document.getElementById('lcp-header-container');
@@ -7,8 +10,8 @@ document.addEventListener('DOMContentLoaded', function () {
     if (!header || !sideContent) return;
     
     // Check if the header has the 'lcp-sticky' and 'lcp-sticky-on-scroll' class
-    const isSticky = header.classList.contains('lcp-sticky');
-    const isStickyOnScroll = header.classList.contains('lcp-sticky-on-scroll');
+    const headerIsSticky = header.classList.contains('lcp-sticky');
+    const headerIsStickyOnScroll = header.classList.contains('lcp-sticky-on-scroll');
     
     // Measure the height of the header once the DOM is loaded
     const headerHeight = header.offsetHeight;
@@ -23,14 +26,15 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // Set the initial height of #lcp-sidecontent based on whether the header is sticky or not
-    if (isSticky) {
-        sideContent.style.height = `calc(100vh - ${headerHeight}px)`;
+    if (headerIsSticky) {
+        sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
     } else {
         sideContent.style.height = `100vh`;
     }
 
     // Function to handle the scroll event
     function handleScroll() {
+        console.log ("hey");
         const scrolled = window.scrollY || document.documentElement.scrollTop;
 
         // Check if the page has scrolled past the height of the header
@@ -40,18 +44,21 @@ document.addEventListener('DOMContentLoaded', function () {
             sideContent.style.top = '0';
 
             // If the header has 'lcp-sticky-on-scroll', adjust height of side content to be 100vh - fullHeaderHeight
-            if (isStickyOnScroll) {
+            if (headerIsStickyOnScroll) {
                 sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
                 // Add 'lcp-fixed' to the header
                 header.classList.add('lcp-fixed');
                 // Set the 'top' of the sideContent to the height of the header
                 sideContent.style.top = `${fullHeaderHeight}px`;
-            } else if (isSticky) {
+            } else if (headerIsSticky) {
                 // If the header is sticky but not 'sticky-on-scroll', keep the side content height adjusted
                 sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
             } else {
                 // Set side content height to 100vh when not sticky
-                sideContent.style.height = '100vh';
+                
+                sideContent.style.height = 'calc(100vh - 32px)';
+                sideContent.style.top = '32px';
+                
             }
         } else {
             // Remove the 'lcp-fixed' class from side content and header if scrolled back above the header
@@ -59,26 +66,45 @@ document.addEventListener('DOMContentLoaded', function () {
             sideContent.style.top = ''; // Reset the 'top' style
 
             // Reset height to 100vh when not fixed
-            sideContent.style.height = isSticky ? `calc(100vh - ${headerHeight}px)` : '100vh';
+            sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)` ;
 
             // If header has the 'lcp-sticky-on-scroll' class, remove 'lcp-fixed' from the header
-            if (isStickyOnScroll) {
+            if (headerIsStickyOnScroll) {
                 header.classList.remove('lcp-fixed');
             }
         }
     }
 
-    // Add the scroll event listener
-    window.addEventListener('scroll', handleScroll);
+
 
     // Also trigger the scroll handler once on load in case the page is already scrolled
     handleScroll();
+
+    function debounce(func, delay) {
+        let timeout;
+        return function() {
+            const context = this;
+            const args = arguments;
+            clearTimeout(timeout);
+            timeout = setTimeout(function() {
+                func.apply(context, args);
+            }, delay);
+        };
+    }
+    
+// Add debounced scroll event listener
+window.addEventListener('scroll', debounce(handleScroll, 20)); // 200ms debounce
+
 });
 
 
 
 
 
+
+
+
+
 const sidecontent = document.getElementById("lcp-sidecontent");
 const innerContent = document.getElementById("lcp-sidecontent-inner");
 const scrollTrack = document.getElementById("lcp-scroll-track");
@@ -143,3 +169,17 @@ innerContent.addEventListener("scroll", updateCustomScrollbar);
 
 // Initialize the custom scrollbar position when the page loads
 updateCustomScrollbar();
+
+
+
+
+
+
+
+
+
+
+
+
+
+