Fade-in and Out with scroll

  • Resolved jamesyesjames

    (@jamesyesjames)


    7 years, 1 month ago

    Hello,

    Love this plugin – great work.

    I’m using the side fixed version and would like to fade in the ADDTOANY when the userr has scrolled down the page 500px (so its not over a vidoe when the user is watching that). I have tried setting .a2a_kit to hidden in the CSS and fade it in with JS but its not working. Any ideas??

    Many thanks,

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author micropat

    (@micropat)

    Sure, here’s the JavaScript to use for the vertical bar:

    jQuery(window).scroll(function () {
    var y = jQuery(this).scrollTop();
    if (y > 500) {
        jQuery('.a2a_floating_style.a2a_vertical_style').show();
    } else {
        jQuery('.a2a_floating_style.a2a_vertical_style').fadeOut();
    }
});

    Please post a URL that has your implementation if you have any trouble.

    Thread Starter jamesyesjames

    (@jamesyesjames)

    Thanks Micropat, Works perfectly

    Hello,

    The plug-in is great, especially because it’s AMP-enabled. I also enabled a show-on-scroll feature on my website but I added a “debounce” function to prevent jerky response or consuming too many resources.

    var debounce_timer = 0; // Used by debounce function
    var min_height = 250; // Minimum height for showing the buttons
    var ms_debounce = 250; // Debounce time (in ms)

    $(window).scroll(function()
    {
    if (debounce_timer)
    {
    window.clearTimeout(debounce_timer);
    }
    debounce_timer = window.setTimeout(function()
    {
    var y = jQuery(this).scrollTop();
    if (y > min_height)
    {
    jQuery(‘.a2a_floating_style.a2a_vertical_style’).show();
    }
    else
    {
    jQuery(‘.a2a_floating_style.a2a_vertical_style’).fadeOut();
    }
    }, ms_debounce);
    });

    Hi,

    The scroll fade JS worked well, but it is overriding the CSS that removes it from the homepage:

    body.home .a2a_floating_style,
    body.page .a2a_floating_style,
    body.category .a2a_floating_style { display: none; }

    Any idea on how I can have the fade only show on posts?

    Thanks!

    Plugin Author micropat

    (@micropat)

    @mattymat Use the !important declaration like so:

    body.home .a2a_floating_style,
body.page .a2a_floating_style,
body.category .a2a_floating_style { display: none !important; }

    Thanks! Worked like a charm!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Fade-in and Out with scroll’ is closed to new replies.