js置顶实现
实现元素置顶的 JavaScript 方法
使用 CSS 的 position: sticky 属性结合 JavaScript 动态控制，适用于滚动时固定元素位置。
// 获取需要置顶的元素
const stickyElement = document.getElementById('sticky-element');
// 监听滚动事件
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) { // 当滚动超过100px时置顶
stickyElement.style.position = 'fixed';
stickyElement.style.top = '0';
} else {
stickyElement.style.position = 'static';
}
});纯 CSS 置顶方案
通过 CSS 的 position: sticky 实现无需 JavaScript 的置顶效果，注意需要指定父容器高度。
.sticky-element {
position: -webkit-sticky;
position: sticky;
top: 0; /* 触发粘性定位的阈值 */
z-index: 1000; /* 确保置顶元素在最上层 */
}动态计算位置的进阶方案
适用于需要响应式布局的场景，通过 IntersectionObserver API 实现精准控制。
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
entry.target.classList.toggle('is-pinned', !entry.isIntersecting);
});
},
{ threshold: [1] }
);
observer.observe(document.querySelector('.sticky-header-trigger'));对应 CSS：
.sticky-header {
transition: transform 0.3s ease;
}
.sticky-header.is-pinned {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}注意事项
- 移动端 Safari 需要
-webkit-sticky前缀 - 父元素不能设置
overflow: hidden属性 - 表格元素（th/tr）在某些浏览器中支持度较差
- 置顶元素会脱离文档流，可能影响后续元素布局
以上方法可根据具体需求选择，CSS 方案性能更优，JavaScript 方案控制更灵活。
