Как элементу поменять цвет после закрепления?

сейчас он всегда желтый (.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>

→ Ссылка