Adding a class to the main-region when the footer-region enters the viewport
-
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
-
-
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;
} -
Dear @jensdan
I am not sure if scrollmagic does work with LayTheme.LayTheme is a single javascript website:
http://laytheme.com/documentation.html#custom-javascriptYou might be able to code it for yourself maybe without that plugin?
Best!
Marius
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it