Hiding text when the user stops scrolling

Design help Custom code
1

Read only link: Webflow - Sans Ceremonie
Published link: https://sans-ceremonie.webflow.io/

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi,

In the design of the website I’m currently building there are category names, which are fixed text elements shown on the page as Edition [category name], which are placed over the images. Essentially all of the category names are stacked on top of each other and their visibility is triggered with a Scroll into view interaction which is linked to the corresponding section.

However, I’ve received the request from a client if it’s possible for the category names to disappear when the user stops scrolling, so that it doesn’t interfere with the images. I’ve found a bit of custom code that almost gets the job done. But it should only by triggered if the corresponding section is in view, because otherwise it will show all the category names when the user starts scrolling again, which is how it’s performing now.

This is the script I’m currently using:

<script>
$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $('.div-edition-pearl, .div-edition-sand, .div-edition-silver, .div-edition-softcover, .div-edition-paper, .div-edition-gold').fadeIn(500);
    $.data(this, 'scrollTimer', setTimeout(function() {
        if ($('.div-edition-pearl, .div-edition-sand, .div-edition-silver, .div-edition-softcover, .div-edition-paper, .div-edition-gold').is(':visible')) {
            $('.div-edition-pearl, .div-edition-sand, .div-edition-silver, .div-edition-softcover, .div-edition-paper, .div-edition-gold').fadeOut(500);
        }
    }, 250));
});
</script>

I’ve tried using ChatGPT to see if I could add code to check if the corresponding section is visible as a trigger. Firstly just for one class to see if it would work, which resulted in the following code:

$(document).ready(function() {
    // Load the isInViewport plugin
    $.getScript('https://cdn.jsdelivr.net/gh/zeusdeux/isInViewport/isInViewport.min.js', function() {
        // Plugin loaded successfully
        var scrollTimer;
        var divEditionPearl = $('.div-edition-pearl');
        
        $(window).scroll(function() {
            clearTimeout(scrollTimer);
            
            var sectionGalleryPearl = $('.section-gallery-pearl');
            
            if (sectionGalleryPearl.length && sectionGalleryPearl.isInViewport()) {
                if (!divEditionPearl.is(':animated') && !divEditionPearl.is(':visible')) {
                    divEditionPearl.fadeIn(500);
                }
                scrollTimer = setTimeout(function() {
                    if (!divEditionPearl.is(':animated') && divEditionPearl.is(':visible')) {
                        divEditionPearl.fadeOut(500);
                    }
                }, 250);
            } else {
                divEditionPearl.stop().fadeOut(500);
            }
        });
        
        $(window).on('scrollstop', function() {
            if (sectionGalleryPearl.length && sectionGalleryPearl.isInViewport() && !divEditionPearl.is(':animated') && !divEditionPearl.is(':visible')) {
                divEditionPearl.fadeIn(500);
            }
        });
    }).fail(function() {
        // Plugin failed to load
        console.log('Failed to load isInViewport plugin.');
    });
});

However this completely breaks the effects.

It seems like a very simple problem to solve, but since I don’t know any jQuery I was hoping someone with more know-how of custom code could help me. Any advice is much appreciated.