The essence of the issue is to make a visual design for downloading new content. Like for example on Yandex mail in the mobile version, if you scroll the page up it leaves the header (preloader) from under the header and disappears after a second.

 <div id="header"> menu </div> <div class="ploader"> Загрузка </div>

The main thing is that the picture is not shown when loading a new page, but only if you scroll the page down a bit and to the top.

Need to add the animateClass class to the ploader class when scrolling to the very top?

Here is an example http://codepen.io/stopani/pen/GobYNK

In the example, the class is added when scrolling from any position, but only when you scroll to the very beginning of the page?

1 answer 1

And what's the problem, first hide it through css, and get scrolling through .scroll () and when you need to show it?
For example, how to make an element appear only at the top:

 $(window).scroll(function() { if(document.body.scrollTop === 0) $('.ploader').addClass('animateClass'); else $('.ploader').removeClass('animateClass'); });
  • it is necessary not only to show but also to hide, the example is not clear. - steep
  • @ SergeyLapshin changed - Mr_Epic
  • @ SergeyLapshin, and you do not see her? I specifically left you to add your checks "&& ...", removed. - Mr_Epic
  • You need to add the animateClass class to the ploader class when scrolling up, not down as you have. - steep
  • one
    @ SergeyLapshin so what? jsfiddle.net/iliailia1212/L2d8y59k/3 - Mr_Epic