当前位置：首页 > JavaScript

js 实现置顶

2026-03-14 16:23:20JavaScript

实现元素置顶的 JavaScript 方法

使用 JavaScript 实现置顶功能通常涉及修改元素的 position 样式属性，并结合滚动事件监听。以下是几种常见场景的实现方式：

固定导航栏或按钮置顶

通过 CSS 和 JavaScript 结合，将元素固定在页面顶部：

const element = document.getElementById('sticky-element');
element.style.position = 'fixed';
element.style.top = '0';
element.style.width = '100%';
element.style.zIndex = '1000';

滚动时动态置顶

当页面滚动超过特定位置时触发置顶效果：

window.addEventListener('scroll', function() {
  const element = document.getElementById('to-stick');
  const scrollPosition = window.scrollY || window.pageYOffset;

  if (scrollPosition > 200) { // 超过200px时置顶
    element.classList.add('sticky');
  } else {
    element.classList.remove('sticky');
  }
});

配套 CSS：

.sticky {
  position: fixed;
  top: 0;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

表格列标题滚动置顶

实现表格横向滚动时列标题保持可见：

const table = document.querySelector('table');
const headers = table.querySelectorAll('th');

table.addEventListener('scroll', function() {
  headers.forEach(header => {
    header.style.transform = `translateY(${this.scrollTop}px)`;
  });
});

React 组件置顶实现

在 React 中使用 hooks 实现置顶效果：

import { useState, useEffect } from 'react';

function StickyHeader() {
  const [isSticky, setSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setSticky(window.scrollY > 100);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div className={isSticky ? 'sticky' : ''}>Header Content</div>;
}

注意事项

js 实现置顶