JQuery FadeTo() на прокрутке - не может заставить его работать должным образом
У меня есть значок стрелки, который я хочу исчезнуть при прокрутке в обозначенную позицию, а в противном случае вернуться обратно. Я попробовал это с помощью метода jQuery fadeOut(), и он работает нормально, но я заметил, что он удаляет элемент и изменяет размеры моего окружения div в процессе. Конечно, я мог бы просто дать div фиксированную высоту, но я хочу, чтобы он был гибким.
$(document).ready(function() {
var arrow = $(".scrollDown");
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x >= 100) {
$(arrow).fadeOut(500);
} else {
$(arrow).fadeIn(500);
}
});
});
То, что я действительно хочу, это просто уменьшить непрозрачность элемента до 0 и вернуться к 1, оставив элемент на месте. Я узнал о методе jQuery fadeTo(), и хотя он исчезает и сохраняет значок на своем месте, я не могу заставить мою стрелку появляться снова, когда прокручиваю назад.
Мне просто интересно, почему это не работает, как моя рабочая функция выше с использованием методов fadeOut () и fadeIn().
$(document).ready(function() {
var arrow = $(".scrollDown");
$(document).scroll(function() {
var yPos = $(this).scrollTop();
if (yPos >= 100) {
arrow.fadeTo(500, 0);
} else {
arrow.fadeTo(500, 1);
}
});
});
Извините, я новичок. Я провел поиск, но не смог найти решение, которое помогло бы мне.
Редактировать:
Я придумал решение, используя animate().
$(document).ready(function() {
var arrow = $(".scrollDown");
$(document).scroll(function() {
var yPos = $(this).scrollTop();
if(yPos >= 100 && arrow.css('opacity') == 1) {
arrow.animate({'opacity': 0}, 500);
} else if (yPos <= 100 && arrow.css('opacity') == 0) {
arrow.animate({'opacity': 1}, 500);
}
});
});
Тем не менее, я хотел бы знать, есть ли простой способ сделать это с помощью метода fadeTo () и что я сделал неправильно в приведенном выше коде. Спасибо!