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