Класс добавлется, а свойства Css не меняются, почему?

Question

[shveitz]

Написал код fade in при скролле, перепробовал много вариантов, думал проблема в js, но видимо нет, так как класс добавляется, а вот стили не применяются. Поэтому анимация появления при скролле не работает, уже не знаю что делать.

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var windowHeight = $(this).height();
  var windowWidth = $(this).width();
  var fadeWindow = $("#fade-window");

  var windowTop = fadeWindow.offset().top;
  var windowBottom = windowTop + fadeWindow.outerHeight();

  if (windowTop < (scrollTop + windowHeight - 200) && windowBottom > scrollTop) {
    fadeWindow.addClass("fade-in");
    fadeWindow.removeClass("fade-out");
  } else {
    fadeWindow.addClass("fade-out");
    fadeWindow.removeClass("fade-in");
  }
});

<div class="body">
         <div class="header-body" id="fade-window">
         <p class="header-txt">КУЗОВ</p>
</div>

.header-body{
    align-items: center;
    width: 240px;
    height: 69px;
    display: flex;
    margin-bottom: 77px;
    transform: translateX(70px);
}
#fade-Window{
    opacity: 1;
    transition: all ease-in 0.2s;
}
#fade-Window.fade-in{
    opacity: 1 !important;
    transform: translateX(70px) !important;
}
#fade-Window.fade-out{
    opacity: 0 !important;
    transform: translateX(-140px) !important;

}

Answer 1

[IvanU7n]

id="fade-window"
не найдётся по
#fade-Window
из-за разного регистра у w и W

Comments

[shveitz]

БОООЖЕЕ!!!!! Спасибо тебе большое, я сколько смотрел ничего так и не заметил