【HTML】解决当scroll滚动fixed定位元素抖动问题

问题分析:

页面滚动到一定高度时,悬停导航栏,fixed固定定位,但当页面滑动到固定定位临界点时,页面会抖动,产生的原因是,class sticky在临界点会添加-移除,产生页面抖动效果,这时加个定时器可解决页面抖动问题。

// 滚动条滚动高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0
let toolbar = null
if (!toolbar) {
   toolbar = document.querySelector('.l-editor-toolbar')
}
if (toolbar) {
   if (scrollTop > 158) {
      let timer = setTimeout(() => {
         clearTimeout(timer)
         toolbar.className = 'l-editor-toolbar sticky'
       }, 5)
    } else {
       let timer = setTimeout(() => {
          clearTimeout(timer)
          toolbar.className = 'l-editor-toolbar'
       }, 5)
    }
}
.sticky{
    position:fixed;
    top:100px;
    z-index: 1;
}

 

你可能感兴趣的:(html)