Как элементу поменять цвет после закрепления?
сейчас он всегда желтый (.sticky)
header {
min-height: 40px;
background-color: red;
}
.sticky {
position: sticky;
top: 0px;
background-color: yellow;
}
p {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0 10px;
}
<header>text</header>
<p class="sticky">test sticky</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
Ответы (1 шт):
Автор решения: Air
→ Ссылка
let sticky = document.querySelector('.sticky')
document.addEventListener('scroll', function() {
if (sticky.offsetTop > 40) {
sticky.classList.add('active')
} else {
sticky.classList.remove('active')
}
})
header {
min-height: 40px;
background-color: red;
}
.sticky {
position: sticky;
top: 0px;
background-color: yellow;
}
.active {
background-color: blue;
}
p {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0 10px;
}
<header>text</header>
<p class="sticky">test sticky</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem enim quod, excepturi nisi hic vel necessitatibus accusamus amet a itaque sit quia, voluptatum, odit adipisci ab dolorem unde omnis!</p>