Так в основном я хотел бы удалить класс из 'заголовка' после того, как пользователь прокручивает немного вниз, и добавьте другой класс для изменения, это - взгляд.
При попытке выяснить самый простой способ сделать это, но я не могу заставить его работать.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$(".clearheader").removeClass("clearHeader").addClass("darkHeader");
}
}
CSS
.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.darkHeader { height: 100px; }
.wrapper {
height:2000px;
}
HTML
<header class="clearHeader"> </header>
<div class="wrapper"> </div>
Я уверен, что делаю что-то очень элементарная несправедливость.
Вот чистый пример JavaScript обработки классов во время прокрутки.
Вы, вероятно, хотели бы отрегулировать события прокрутки обработки, больше поскольку логика обработчика становится более сложной, в этом случае throttle
от lodash
, lib пригождается.
И если Вы делаете спа, имейте в виду, что необходимо очистить слушателей события с removeEventListener
, как только они не нужны (например, во время onDestroy
рычаг жизненного цикла компонента, как destroyed()
для Vue, или, возможно, возвратите функцию useEffect
, рычаг для Реагирует).
const navbar = document.getElementById('navbar')
// OnScroll event handler
const onScroll = () => {
// Get scroll value
const scroll = document.documentElement.scrollTop
// If scroll value is more than 0 - add class
if (scroll > 0) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled")
}
}
// Optional - throttling onScroll handler at 100ms with lodash
const throttledOnScroll = _.throttle(onScroll, 100, {})
// Use either onScroll or throttledOnScroll
window.addEventListener('scroll', onScroll)
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
background-color: #89d0f7;
box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
transition: box-shadow 500ms;
}
#navbar.scrolled {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}
#content {
height: 3000px;
margin-top: 60px;
}
<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>