当前位置:   article > 正文

【HTML】解决当scroll滚动fixed定位元素抖动问题_在ie浏览器下定位fixed定位的内容随着滚动条晃动

在ie浏览器下定位fixed定位的内容随着滚动条晃动

问题分析:

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

  1. // 滚动条滚动高度
  2. let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0
  3. let toolbar = null
  4. if (!toolbar) {
  5. toolbar = document.querySelector('.l-editor-toolbar')
  6. }
  7. if (toolbar) {
  8. if (scrollTop > 158) {
  9. let timer = setTimeout(() => {
  10. clearTimeout(timer)
  11. toolbar.className = 'l-editor-toolbar sticky'
  12. }, 5)
  13. } else {
  14. let timer = setTimeout(() => {
  15. clearTimeout(timer)
  16. toolbar.className = 'l-editor-toolbar'
  17. }, 5)
  18. }
  19. }
  1. .sticky{
  2. position:fixed;
  3. top:100px;
  4. z-index: 1;
  5. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/384051
推荐阅读
相关标签
  

闽ICP备14008679号