How to apply back to top button fade in effect to another element?

[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.

[Tom]

Hi 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-development

[Guido]

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.

[Tom]

You 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-development

[Guido]

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!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts