Dynamic Scroll Content Update

if (scrollContainer) {
const items = scrollContainer.querySelectorAll('.post-scroll-item');
const contentContainer = scrollContainer.querySelector('.post-scroll-content');
const imageContainer = jQuery('.post-scroll-image');

// Update item opacity and image on scroll
contentContainer.addEventListener('scroll', function () {
const scrollTop = contentContainer.scrollTop;

items.forEach((item, index) => {
const itemTop = item.offsetTop – contentContainer.offsetTop;
const itemBottom = itemTop + item.offsetHeight;

if (
scrollTop >= itemTop – contentContainer.clientHeight / 2 &&
scrollTop < itemBottom
) {
// Set active opacity
jQuery(items).css('opacity', '0'); // Reset all items to 0.5 opacity
jQuery(item).css('opacity', '1'); // Set active item to 1

// Change image
const imgSrc = jQuery(item).data('img');

if (imgSrc) {
imageContainer.html(“);
}
}
});
});

}
});
also change content based on brrowser sroll bar

### Key Enhancements:
– Added a `window.scroll` event listener to track the browser scrollbar.
– Used `getBoundingClientRect()` to detect when an element is in the viewport.
– Updated the image and content dynamically.

document.addEventListener('DOMContentLoaded', function () {
    const scrollContainer = document.querySelector('.post-blog-scroll');
    const contentContainer = document.querySelector('.post-scroll-content');
    const items = document.querySelectorAll('.post-scroll-item');
    const imageContainer = jQuery('.post-scroll-image');

    function updateActiveItem(scrollTop) {
        items.forEach((item, index) => {
            const itemTop = item.getBoundingClientRect().top;
            const itemBottom = itemTop + item.offsetHeight;
            const windowHeight = window.innerHeight;

            if (itemTop < windowHeight / 2 && itemBottom > windowHeight / 3) {
                jQuery(items).css('opacity', '0.5'); // Reset all items
                jQuery(item).css('opacity', '1'); // Highlight active item

                // Change image
                const imgSrc = jQuery(item).data('img');
                if (imgSrc) {
                    imageContainer.html(`<img src="${imgSrc}" alt="Scroll Image" />`);
                }
            }
        });
    }

    // Listen to custom container scroll
    if (contentContainer) {
        contentContainer.addEventListener('scroll', function () {
            updateActiveItem(contentContainer.scrollTop);
        });
    }

    // Listen to browser scroll
    window.addEventListener('scroll', function () {
        updateActiveItem(window.scrollY);
    });

});

### Explanation:
– `getBoundingClientRect().top` helps determine if an element is visible in the viewport.
– Adjusts opacity and updates the image when an item is centered in the viewport.
– Handles both `.post-scroll-content` scrolling and window scrolling.

Let me know if you need further modifications! 🚀