0

I'm trying to fadeIn a div after I scroll to a certain point (pretty page on the middle of my first page). A good function that does that can be found here: Show div on scrollDown after 800px

I'm talking about this one

  var y = $(this).scrollTop();
  if (y > 300) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

But the problem with this one is it doesn't hide the div if you haven't already scrolled past the point of the fade. I want to hide the div first and then show it when I scroll to it or past the point where I get to it (for me it's 300px).

I have tried:

  • setting the opacity of the div (or the header in the div) to 0: this didn't display anything at all. I did this since I saw that fadeIn() and fadeOut() are both transformations of the opacity. I wanted to first have it hidden by it's opacity and then let the function change it's values. It didn't work.

I think I need a function separate from this that checks if I haven't scrolled past the y point yet and if so it hides the div. And once I scroll to the y point the function should work as normal. But I have no clue how to write JavaScript.

j08691
  • 204,283
  • 31
  • 260
  • 272
Ares
  • 1
  • on document ready, you should check the current scrollTop (i.e. `var y = $(window).scrollTop();` then run the same if logic after that. – zgood Mar 26 '20 at 16:27

1 Answers1

0

I fixed it myself. I needed to type display: none to the div.

Ares
  • 1