Non-sticky Footer Fullscreen Slider

[Lukasmuellner]

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

[Richard]

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

[Lukasmuellner]

Dear @Richard-K,

Thank you so much for taking a look, here’s the link:
https://dev.eldineheep.com/apartment-h

Cheers,
Lukas

[Lukasmuellner]

Hey @Richard-K,
Have you had a chance to take a look as of yet?

Cheers,
Lukas

[Richard]

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-javascript

If 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-jquery

The 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

[Lukasmuellner]

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

[Richard]

Dear @Lukasmuellner

Cool! :)

Talk soon and have a lovely week

Richard