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 () и что я сделал неправильно в приведенном выше коде. Спасибо!

0 ответов

Другие вопросы по тегам