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

整理下初学时做过的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;
}