position: sticky 修改吸顶样式

<div id="parent">
  <br />  <br />  <br />  <br />
  <div class="myElement">Hello!</div>
</div> 
#parent { 
  height: 2000px; 
}

.myElement {
  position: sticky;
  top: -1px;
}

/* styles for when the header is in sticky mode */
.myElement.is-pinned {
  color: red;
} 
const el = document.querySelector(".myElement")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(el);

 

posted @ 2022-11-04 19:44  生命在于折腾Up  阅读(506)  评论(0编辑  收藏  举报