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.