Adding a class to the main-region when the footer-region enters the viewport

[jensdan]

Hi

Thank you for all your great work on this theme!

I am trying to add/remove a class to the main-region as soon as the the footer-region enters/leaves the viewport. Preferably I would like the main-region to stick to the bottom of the viewport and have the footer-region "slide over" the main-region (e.g. by giving it a class with lover z-index and position fixed to the bottom). I have tried various javascript solutions but have been unable to find any that work.

Any input and suggestions on how/if this is a achievable would is much appreciated!

Thx! Jens

[mariusjopen]

Dear @jensdan
can you post a link with your tryouts?

Best!

Marius

[jensdan]

Hi Marius

Thank you for your answer! I am working locally via mamp, so I don't think it is possible to share my tryouts. But any ideas and inputs would be great! Thanks

I have http://scrollmagic.io but can't make it work. Do you know if it is possible to use scroll magic with Lay theme?

I have also tried using various javascripts. E.g. this where I tried using an element in the main-region as a trigger to add a class to the main-region (but I can't make it work like I want to).

<script>

jQuery(document).ready(function($) {

function sticky()
{
    var window_top=$(window).scrollTop();
    var top_position=$('#sticky-trigger').offset().top;
    var element_to_stick=$('#main-region');
    
    if (window_top > top_position) {
        element_to_stick.addClass('main-region-sticky');
    } else {
        element_to_stick.removeClass('main-region-sticky');
    }
}
$(window).scroll(sticky);
sticky();

});
</script>

And then adding this CSS:

#main-region.main-region-sticky {
position: fixed;
bottom: 0;
}

[mariusjopen]

Dear @jensdan
I am not sure if scrollmagic does work with LayTheme.

LayTheme is a single javascript website:
http://laytheme.com/documentation.html#custom-javascript

You might be able to code it for yourself maybe without that plugin?

Best!

Marius