Fade in and out при прокрутке с помощью jquery

Question

Я хочу показывать div каждый раз, когда количество прокручиваемых пикселей и исчезает после некоторой дополнительной прокрутки. Я узнал какую-то логику, но в конце концов, есть конфликт, div снова затухает, так как я говорю каждый раз, когда прокрутка> 250, она будет исчезать. Как я могу ее решить?

$('#1').hide(); 

$(window).scroll(function() { 
    if ($(this).scrollTop() > 250) { //use `this`, not `document` 
    $('#1').fadeIn(); 
    } 
    if ($(this).scrollTop() > 1250) { //use `this`, not `document` 
    $('#1').fadeOut(); 
    } 
}); 

Answer 1

Показать элемент, только если значение scrollTop меньше или равна 1250.

if ($(this).scrollTop() > 250 && $(this).scrollTop() <= 1250){ 
    $('#1').fadeIn(); 
} 

---

Хотя вы можете использовать stop(), чтобы остановить предыдущую анимацию.

$(window).scroll(function() { 
    if ($(this).scrollTop() > 250) { 
    if ($(this).scrollTop() > 1250) 
     $('#1').stop().fadeOut(); 
    else 
     $('#1').stop().fadeIn(); 
    } 
}); 

Answer 2

Проблема заключается в том, что ваша логика ошибочна. Вам необходимо обслуживать случаи, когда scrollTop не находится в диапазоне ваших текущих if условий. Попробуйте это:

$(window).scroll(function() { 
    if ($(this).scrollTop() > 250 && $(this).scrollTop() < 1250) { 
    $('#1').fadeIn(); 
    } else { 
    $('#1').fadeOut(); 
    } 
}); 

Working example

Примечание в приведенном выше примере, я должен был изменить id таким образом, чтобы он не стал с номером, который имеет проблемы в Chrome.