首页 > 其他分享 >position: sticky 修改吸顶样式

position: sticky 修改吸顶样式

时间:2022-11-04 19:58:04浏览次数:78  
标签:el const observer sticky position 吸顶 myElement

<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);

 

标签:el,const,observer,sticky,position,吸顶,myElement
From: https://www.cnblogs.com/-liujia/p/16858938.html

相关文章