Non-sticky Footer Fullscreen Slider
-
Hi @arminunruh and team,
I am aware with an active fullscreen slider it’s currently not possible to show a footer. However, I had a look through all posts re custom CSS and have managed to get a sticky footer working.Though, would it be possible to set up a ‘non-sticky’ footer whilst utilising the fullscreen slider addon — i.e., the footer should show up as the last ‘slide’ of the fullscreen slider if that makes sense.
Thank you,
Lukas -
Dear Lukas @Lukasmuellner
Interesting question and a worthy pursuit! :)
Are you able to post a link to your website with the footer and i'll see what i can do :)
Best wishes
Richard -
Dear @Richard-K,
Thank you so much for taking a look, here’s the link:
https://dev.eldineheep.com/apartment-hCheers,
Lukas -
Hey @Richard-K,
Have you had a chance to take a look as of yet?Cheers,
Lukas -
Hi Lukas @Lukasmuellner
Sorry for the delay :)
I hope i understand correctly - A few things are possible but its based on how the design would work.
I would make it simple and have the Footer work based on addClass() . When the Class 'active' is added to the footer it would get some CSS making it appear. ( '#footer-region').If the last slide will always be at the end of your page - that would be the easiest. jQuery would check if you are at the end then add the Class 'Active' to #footer-region.
jQuery(window).scroll(function() { jQuery("#footer-region").removeClass("active"); if(jQuery(window).scrollTop() + jQuery(window).height() > (jQuery(document).height() - 100) ) { //you are at bottom jQuery("#footer-region").addClass("active"); } });
The Above code also needs to be wrapped in a Newpage event:
https://laytheme.com/documentation.html#custom-javascriptIf this does not suit the next option is based on how the Slider works: When a Slide is visible on screen it gets the class 'active'. When the last row of your slider ( '.row-5' ) get the class 'active' then addClass to the #footer-region.
Note:
This jQuery would require it to be watching the page constantly and waiting for a change as firing the jQuery on page load will not work - '.row-5' is not in use yet.This can be achieved with the 'mutation observer' Or also checking at intervals:
https://stackoverflow.com/questions/49179995/always-check-hasclass-with-jqueryThe First option is the easiest but require's the design to suit. because the Slider is on Loop the class 'last-slide' is not in use - with this we could cause the trigger, but loop is better for your page's functionality.
Sorry if this was a ramble :)
_ When the viewer reaches the last slide - addClass to the Footer giving it new CSS that will make it visible.- Also if the footer needs to disappear again look into 'ToggleClass:
https://www.w3schools.com/jquery/html_toggleclass.asp
Then the class will be removed again - or you could say - When user is above the last slide removeClass(".active") from Footer.
Let me know your thoughts :)
Best wishes
Richard - Also if the footer needs to disappear again look into 'ToggleClass:
-
Dear @Richard-K,
Thank you so much for the above, I’ll take a look this week and get back to you.Speak soon,
Lukas -
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it