всем привет, моя проблема в том, что я реализовал навигационную панель, которая в момент прокрутки пользователем меняет цвет и работает отлично, я следовал этому jsfiddle: https://jsfiddle.net/we9L9h2r/.
У меня есть только одна проблема, когда он прокручивается вниз, он меняет цвет идеально, но когда он прокручивается вверх и должен возобновить начальный стиль, он остается фиксированным на цвете прокрутки вниз
код:
css:
.fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
.fixed-top.scrolled .nav-link {
color:#555;
}
html:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top lighten-3 d-block " id="navigation" >
...
</nav>
js:
$(function () {
$(document).scroll(function () {
var $nav = $(".fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
, проверив предмет как можно скорее когда пользователь приходит на сайт
<nav class="navbar navbar-expand-lg navbar-dark fixed-top lighten-3 d-block " id="navigation" >
...
</nav>
, как только он прокручивается, прокручиваемый класс добавляется
<nav class="navbar navbar-expand-lg navbar-dark fixed-top lighten-3 d-block scrolled" id="navigation" >
...
</nav>
, но, к сожалению, он не возвращается мне прозрачным, но остается белым для меня, как получилось?
проблема в том, что я остаюсь в прокручиваемом классе, а css говорит ему быть #fff; в теории, когда должна быть прокрутка вверх, она должна удалить прокручиваемый класс