js基础编程-题目24 滚动吸顶

最新推荐文章于 2024-12-26 15:32:46 发布

原创最新推荐文章于 2024-12-26 15:32:46 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

柳晓黑胡椒

文章标签：

#javascript #前端 #es6

js编程题专栏收录该内容

29 篇文章

订阅专栏

本文分享了四种实现滚动吸顶效果的方法：使用原生offsetTop、JQuery的offset().top、position:sticky及getBoundingClientRect().top。并详细介绍了如何通过原生JS实现该效果，包括HTML、CSS和JS的具体实现。

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

滚顶吸顶

滚动吸顶有几种方式？
1.	使用原生的 offsetTop 实现
2.	使用 JQuery 的 offset().top 实现
3.	使用 position:sticky 实现
4.	使用 obj.getBoundingClientRect().top 实现

效果：滚动吸顶效果视频链接
这里详细说一下用原生js实现

原生js实现
html部分

<nav>
  <h1>导航</h1>
  <div id="scrollDom">滚动吸顶的元素</div>
</nav>
<section>
  p{内容$}*40
</section>

js部分

<script>
  let scrollDom = document.querySelector('#scrollDom')
  // 确定元素与上窗口的距离
  let offsetTop = getPosition(scrollDom).top
  window.addEventListener('scroll', function () {
    // 滚动条到达使，给滚动吸顶的元素设置固定定位
    if (getScrollOffset().y >= offsetTop) {
      scrollDom.className = 'fixed'
      // 没达到则取消固定定位
    } else {
      scrollDom.className = ''
    }
  })
  //封装获取滚动条的滚动距离方法
  function getScrollOffset() {
    if (window.pageXOffset !== null) {//IE8及IE8以下不兼容
      return {
        x: window.pageXOffset,
        y: window.pageYOffset
      }
    } else if (docuemnt.compatMode === 'CSS1Compat') {
      //标准模式  W3C
      return {
        x: document.documentElement.scrollLeft,
        y: document.documentElement.scrollTop
      }
    } else {
      //混杂模式  BackCompat   
      return {
        x: document.body.scrollLeft,
        y: document.body.scrollTop
      }
    }
  }
	// 封装获取元素相对文档的位置方法
  function getPosition(dom) {
    let offsetLeft = dom.offsetLeft
    let offsetTop = dom.offsetTop
    let parent = dom.offsetParent
    while (parent) {
      offsetLeft += parent.offsetLeft
      offsetTop += parent.offsetTop
      parent = parent.offsetParent
    }
    return {
      top: offsetTop,
      left: offsetLeft
    }
  }
</script>

css部分

* {
  margin: 0;
  padding: 0;
}
nav {
  width: 100vw;
  height: 20vh;
  text-align: center;
  background-color: pink;
}
h1 {
  width: 100vw;
  height: 10vh;
}
#scrollDom {
  width: 100vw;
  height: 10vh;
  line-height: 10vh;
  background-color: blue;
}
.fixed {
  position: fixed;
  left: 0;
  top: 0;
}
section {
  height: 70vh;
}