Класс добавлется, а свойства Css не меняются, почему?
Написал код 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"); } }); |
$(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> |
<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; } |
.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; }
Дополнительно:
id="fade-window"
не найдётся по
#fade-Window
из-за разного регистра у w и W
- БОООЖЕЕ!!!!! Спасибо тебе большое, я сколько смотрел ничего так и не заметил
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы изменения CSS свойств класса применялись к элементу, необходимо убедиться, что установленные вами свойства не переопределяются другими правилами CSS или inline-стилями. Возможно, у вас есть другие правила CSS, которые имеют больший приоритет или же inline-стили, которые переопределяют свойства из класса.
Если вы уверены, что ваш класс правильно определен и не переопределяется другими стилями, то возможно проблема связана с кэшированием браузера. Попробуйте очистить кэш браузера или использовать инкогнито-режим для проверки.
Еще одна причина может быть в том, что изменения свойств класса не применяются из-за ошибок в CSS-коде. Убедитесь, что все свойства правильно написаны, не содержат опечаток и правильно сгруппированы.
Если проблема все еще не решена, попробуйте использовать !important после значения свойства в CSS для установки приоритета. Однако, это решение не рекомендуется, так как может создавать проблемы с управлением стилями в будущем.
Приведу пример применения CSS свойств для класса в PHP:
<?php echo ' .myClass { color: red; font-size: 16px; } '; ?>
Убедитесь, что ваш CSS-код правильно встраивается в HTML-документ и не содержит ошибок. После этого проверьте, работают ли изменения CSS свойств для вашего класса. Если проблема сохраняется, возможно, стоит обратиться к специалисту по веб-разработке для дальнейшей диагностики.