I have a problem with data reloading and this is my question:
I made an animation for each <article> shows a preloader. For example, you can see below that I set a condition to show me the next <article> if user scrolled from 620px to 640px, and the main problem is that it loads again when I scroll up. What should I do? Can anyone help?
var bodyTop = $('body').offset().top,
bodyHeight = $('body').outerHeight(),
windowHeight = $(window).height(),
windowScrollTop = $(this).scrollTop(),
desktopview = (windowHeight >= 992),
desktop = $(window).width() >= 992 ,
if (desktop && windowScrollTop > 620 && windowScrollTop < 640) {
$('#dot-1').show();
setTimeout(function(){
$('#dot-1').hide();
$('.scroll-1').removeClass("display-none");
}, 3000);
}else {}
if (desktop && windowScrollTop > 1100 && windowScrollTop < 1110 ) {
$('#dot-2').show();
setTimeout(function(){
$('#dot-2').hide();
$('.scroll-2').removeClass("display-none");
}, 3000);
}else {}
if (desktop && windowScrollTop > 1640 && windowScrollTop < 1680) {
$('#dot-3').show();
setTimeout(function(){
$('#dot-3').hide();
$('.scroll-3').removeClass("display-none");
}, 3000);
}else {}
if (desktop && windowScrollTop > 2000 && windowScrollTop < 2040 ) {
$('#dot-4').show();
setTimeout(function(){
$('#dot-4').hide();
$('.scroll-4').removeClass("display-none");
}, 3000);
}else {}
if (desktop && windowScrollTop > 2700 && windowScrollTop < 2740 ) {
$('#dot-5').show();
setTimeout(function(){
$('#dot-5').hide();
$('.scroll-5').removeClass("display-none");
}, 3000);
}else {}
if (desktop && windowScrollTop > 3100 && windowScrollTop < 3140 ) {
$('#dot-6').show();
setTimeout(function(){
$('#dot-6').hide();
$('.scroll-6').removeClass("display-none");
}, 3000);
}else {}
First and foremost, your showing technique is bad practice because it depends on screen size.
Secondly, you are changing the elements visibility and you can't do anything about that because you are always manipulating the elements showing status, but if you want to save data and preventing it from reloading, save the data in your browser localStorage.
Here is an example of setting and getting data from localStorage:
localStorage.setItem("lastname", "Smith");
localStorage.getItem("lastname"); // the output would be Smith