- This topic has 5 replies, 2 voices, and was last updated 1 year, 1 month ago by
Tom.
-
AuthorPosts
-
March 12, 2020 at 5:34 am #1192752
Guido
Hi,
I have a sticky footer bar that I made using an Element Hook, which sticks to the bottom of the screen using CSS. This bar is currently always visible (url provided for admins). The element contains a cta button wrapped in a .sticky-footer div.
When the back to top button is enabled, it appears nicely on top of this bar after scrolling a little bit. As far as I’ve been able to tell this uses some jquery?
Is there an easy way I could borrow the fade in property from the back to top button so my sticky footer bar will fade in at the same time after scrolling a little bit as well? If so, I would very much appreciate a hint.
Sorry if this is a potato question, but my brain isn’t connecting the dots.
March 12, 2020 at 6:45 pm #1193373Tom
Lead DeveloperLead DeveloperHi there,
Since your site is using jQuery, you can do this:
jQuery( window ).bind( "scroll", function() { if ( jQuery( this ).scrollTop() > 520 ) { jQuery( ".sticky-footer" ).fadeIn(); } else { jQuery( ".sticky-footer" ).stop().fadeOut(); } } );
Then add this CSS:
.sticky-footer { display: none; }
Just change the
520
to whenever you want it to fade in.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 13, 2020 at 2:15 am #1193534Guido
Hi Tom,
Thank you very much. That already helped a ton!
I created an Element executed in the footer containing the script you provided and added script tags to make it work there:
<script> jQuery( window ).bind( "scroll", function() { if ( jQuery( this ).scrollTop() > 300 ) { jQuery( ".sticky-footer" ).fadeIn(); } else { jQuery( ".sticky-footer" ).stop().fadeOut(); } } ); </script>
Changing 520 to 300 synced my sticky footer to appear at the same time as the back to top (BTT) button when scrolling down.
When scrolling up, the back to top button disappears well before the sticky footer does. After some research and testing, I removed the following:
.stop()
Resulting in:
<script> jQuery( window ).bind( "scroll", function() { if ( jQuery( this ).scrollTop() > 300 ) { jQuery( ".sticky-footer" ).fadeIn(); } else { jQuery( ".sticky-footer" ).fadeOut(); } } ); </script>
This made the difference between the BTT button and the sticky footer fading out when scrolling up a lot smaller, but there is still a noticeable difference.
I also tried applying some of the BTT button transition css to the sticky footer and messing with its values, but that didn’t change the point when the sticky footer disappears, only how long it takes to disappear. Which makes sense.
Does anyone know of a way to also control the fadeout timing when scrolling up using this specific code example? Other examples I’ve come across seem to use a lot more code and if I can keep it light I’d like to.
March 13, 2020 at 10:16 am #1194070Tom
Lead DeveloperLead DeveloperYou can add a value in milliseconds to the
fadeOut()
function:fadeOut( 300 )
Perhaps that will help?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 13, 2020 at 6:30 pm #1194286Guido
I set that to 50 and that seems to sync it up visually at least. Doesn’t fade out as smooth as it fades in, but the sticky footer and BTT button now disappear at the same time at a glance. That’ll do for me!
Thank you very much for your amazing support as always!
March 14, 2020 at 8:04 am #1194780Tom
Lead DeveloperLead DeveloperNo problem! 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.