Element CSS based on scrolling past specific element's ID

[MathiasD]

Hi

I have a sticky header which CSS I have been able to change based on when a section’s ID has been reached by scrolling.

Sticky header element’s css:

.section-dark  {
background-color: white;
}

.section-light {
background-color: none;
}

Header JS:

(function($){
    var currentSection = ' ';
    var sectionClass = ' ';
    var sectionID = '';

    $(document).scroll(function () {
        

        $('.x-section').each(function () {

            if($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
                console.log($(this).attr('id'));
                sectionClass = $(this).attr('id');
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
        });

        $('.x-bar-fixed').removeClass(''+sectionID);
        sectionID = $('.x-section.active').attr('id');
        $('.x-bar-fixed').addClass(''+sectionID);

    });
})(jQuery);

This also works with other elements when scrolling past a specific section’s ID. However, I wish to be able to scroll past other elements than a section. Lets say a x-cell

That would make me able to do custom css on cells based on scrolling past other cells. Which would be pretty cool!

How do I tweak that JS so that this will work with cells instead of sections?

Let me know what you think.

Thanks.

Br. Mathias

[ruenel]

Hello Mathias,

Thanks for writing in!

You have specifically pointed out the section by using the .x-section. If you are using a Grid instead of the Section element, you may use .x-grid.

Be advised that custom JS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.