Как добавить временный класс через jquery для обработки css переходов? - PullRequest
Новая
       6

Как добавить временный класс через jquery для обработки css переходов?

0 голосов
/ 04 апреля 2020

Simplisti c макет в основном функциональный макет: на коде 

$(window).scroll(function() {
  if ($(window).scrollTop() > 75) {
    $(".mainbg").addClass("blur");
    $("header").addClass("fade");
  } else {
    $(".mainbg").removeClass("blur");
    $("header").removeClass("fade");
  }
});

Чего я пытаюсь достичь: Когда вы прокручиваете страницу вниз, фоновое изображение размывается, а заголовок теряет прозрачность до 0. Размытие и затухание активируются только при прокрутке вверх или вниз.

Проблема, с которой я столкнулся: Технически jQuery я написал работы, но если я на полпути вниз по странице и переосмысливаю sh, есть заикание, где классы .fade и .blur go через свои переходы. Как правило, примерно на секунду фоновое изображение становится четким, а под прозрачным содержимым виден заголовок.

Решение Мне бы хотелось: Однажды я увидел очень сложное руководство по переходу , который добавил класс .animate, чтобы предотвратить переходы при загрузке или обновлении sh. Я хотел бы реализовать нечто подобное.

Как я пытался решить: Я пытался написать больше операторов if / else if / else для добавления другого класса, .animate; те операторы if / else if / else были привязаны к позициям scrollTop на странице. В идеале я хочу только добавить класс .animate при активной прокрутке сверху или снизу. К сожалению, мои gr asp из javascript и jQuery настолько ограничены, что попытка добавить третье состояние была трудной. Либо класс .animate всегда присутствует, либо мои попытки нарушают классы .fade / .blur, поэтому они не применяются. Я пытался найти свою проблему в stackoverflow, но, может быть, я просто не знаю подходящих терминов для поиска? Я не мог найти похожие вопросы.

Вот пример одного из написанных мной скриптов, который не работал: 

$(window).scroll(function () {
    if ($(window).scrollTop() > 75) {
        $(".mainbg").addClass("blur animate");
        $("header").addClass("fade animate");
    } else if ($(window).scrollTop() < 75) {
        $(".mainbg").removeClass("blur");
        $("header").removeClass("fade");
    } else {
        $(".mainbg").removeClass("animate");
        $("header").removeClass("animate");
    }
});
...