Hide a div until scrolled to the bottom of the page

Question

I am making a web page (kind of like those music release pages, here is an example), and I would like certain div's at the bottom not to be shown until the user has scrolled to the bottom of the page, delay a second or two, then pop up. Kind of like a hidden feature thing. You can also think of it like an infinite scroll, like when you drag down your Instagram feed at the top it refreshes it, and new posts show up. That's the user experience I'm looking for, only in my case it is a "finite scroll", just with some div's hidden by default.

I currently have two implementations of it, neither fully achieves the desired experience. Both used jQuery Slim.
In both implementations, #hidden is the id of my hidden-by-default div, it has style="display: none;" inline, on the div tag.

The first one looks like this:

$(window).scroll(function() {
var x = $(document).height() - $(window).height() - 20;
if( $(window).scrollTop() > x ) {
  $("#hidden").delay(1000).show(0);
}
else {
  $("#hidden").hide(0);
}
});

The problem with this one is that when the div shows up it changes the document height, so when you get to the bottom of the page it kind of flickers (due to recomputing the document height), and sometimes goes back to being hidden. Really bad user experience.

The second one looks like this:

$(window).scroll(function() {
if( $(window).scrollTop() > 75 ) {
  $("#hidden").delay(1000).show(0);
}
else {
  $("#hidden").hide(0);
}
});

This one got rid of the flickering problem by keeping the threshold static altogether, slightly better user experience, but not really flexible, in the case that my page gets longer I'll have to set a new threshold for the div to show up.

In neither of the above solutions did the delay(1000) work. The div showed up as soon as the page gets scrolled to the bottom.

Is it possible to make this design work out?

score 0 · Accepted Answer · answered Apr 21 '18 at 18:09

0

You can try this code:

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        $("#hidden").delay(1000).show(0);
    }
});

answered Apr 21 '18 at 18:09

Jengas

204
2
11

Thanks the scrolling part works amazingly! However, the delay still don't work. The div showed up immediately. – Samm Apr 21 '18 at 18:31
@Samm Delay doesnt work with show(). Try to use fadeIn – Jengas Apr 21 '18 at 18:34
does that mean that I'll have to use the full jQuery? I am really feeling against using the entire library on a simple page like this. Are there other workarounds? – Samm Apr 21 '18 at 18:36
@Samm, read this https://stackoverflow.com/questions/4508644/how-can-i-use-delay-with-show-and-hide-in-jquery – Jengas Apr 21 '18 at 18:57
@Samm you can also add a class to the selected element (id or class) `$( "#yourid" ).addClass( "myClass yourClass" );` – Jengas Apr 21 '18 at 19:14
@Samm Maybe this might help you https://stackoverflow.com/questions/2510115/jquery-can-i-call-delay-between-addclass-and-such If it will not help you, you can try to use keyframes instead (css) – Jengas Apr 21 '18 at 20:04
`if ((scrollHeight - scrollPosition) / scrollHeight === 0) { $("#hidden").delay(1000).queue(function(next){ $(this).addClass("show"); next(); }); }` didn't let the div show up at all. HTML inspector shows that the `show` class was never added. – Samm Apr 21 '18 at 20:20
I'm now leaning towards adding a clickable poop emoji at the bottom for that instead. Will appreciate further discussions for learning purposes, but I think my actual problem is solved for now. Thanks again. – Samm Apr 21 '18 at 20:23

Hide a div until scrolled to the bottom of the page

1 Answers1