Hide div when reach bottom of page

Hi!

I have tried different solutions I found on the web, but none of them work for me, so I need some help

I want to hide the follow-widget on our blogs, when the user reach the bottom of the page. See screenshot, and see it here: http://www.bykrog.dk

The sticky widget on the right. Is it possible?

  • Predrag Dubajic
    • Support

    Hey @mathias,

    Hope you’re doing well today :slight_smile:

    Here is a bit of JS that should be able to do this for you, if you are using child theme you can put this in your footer.php file:

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery(window).scroll(function() {
    if (jQuery('body').height() <= (jQuery(window).height() + jQuery(window).scrollTop())) {
    jQuery('#followwidget').hide();
    }else{
    jQuery("#followwidget").show();
    }
    });
    });
    </script>

    Let me know if that works for you or you need some additional help :slight_smile:

    Best regards,

    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hey Mathias,

    I hope you’re well today!

    It’s great to know that the solution works for you. To make the div fade in/out please make the following replacements in the code:

    1. Replace this line:

    jQuery('#followwidget').hide();

    with this:

    jQuery('#followwidget').fadeOut("slow");

    2. Replace this line:

    jQuery("#followwidget").show();

    with this:

    jQuery("#followwidget").fadeIn("slow");

    To change the fade in/out speed you may want to replace the “slow” parameter with “normal” or “fast” or use a value (miliseconds) instead. Default value is “400” (a bit less than half a second).

    I hope that helps!

    Cheers,

    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hey Mathias,

    I’m glad that helped!

    To change the moment the box disappears you may want to try replace this line:

    if (jQuery('body').height() <= (jQuery(window).height() + jQuery(window).scrollTop())) {

    with this:

    if (jQuery('body').height() <= ((jQuery(window).height() + jQuery(window).scrollTop())-300)) {

    Most likely, you’ll want to experiment a bit with a value and replace “300” with some other number (it’s in pixels) and/or replace “-” with “+” sign.

    Cheers,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.