JS实现吸顶效果

JS实现吸顶效果通常有两种方法：

1. 监听页面滚动事件，当滚动到一定位置时，将需要吸顶的元素的定位改为fixed，并设置相应的样式，如top和z-index等。当页面滚动回到原位置时，将元素的定位改回原来的状态。

2. 使用CSS的position: sticky属性，将需要吸顶的元素的position属性设置为sticky，并设置相应的top和z-index等样式，即可实现吸顶效果。需要注意的是，该属性的兼容性并不是很好，需要针对不同的浏览器进行兼容处理。

以下是基于第一种方法的代码示例：

<div id="header">需要吸顶的元素</div>
<div id="content">页面内容</div>

var header = document.getElementById('header');
var headerOriginalPos = header.offsetTop; // 获取元素原来的位置

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop >= headerOriginalPos) {
    header.style.position = 'fixed';
    header.style.top = '0';
    header.style.zIndex = '999';
  } else {
    header.style.position = 'static';
  }
});

以上代码监听了页面滚动事件，并通过判断scrollTop和headerOriginalPos的大小关系来确定是否需要吸顶。当需要吸顶时，将header的position设置为fixed，并设置top和z-index等样式；当不需要吸顶时，将position设置为static，即可实现吸顶效果。