js实现简单置顶

实现元素置顶的基本方法

使用CSS的position: sticky属性可以轻松实现元素滚动到特定位置时置顶。这种方法不需要JavaScript，但需要设置top值来定义触发置顶的位置。

.sticky-element {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

使用JavaScript实现动态置顶

当需要更复杂的控制时，可以通过监听滚动事件动态添加/移除固定定位类：

window.addEventListener('scroll', function() {
  const element = document.querySelector('.target-element');
  const scrollPosition = window.scrollY;
  const triggerPosition = 200; // 触发置顶的滚动位置

  if (scrollPosition >= triggerPosition) {
    element.classList.add('fixed-top');
  } else {
    element.classList.remove('fixed-top');
  }
});

对应的CSS样式：

.fixed-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

优化性能的Intersection Observer方法

使用Intersection Observer API可以避免频繁触发滚动事件，提升性能：

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      const element = entry.target;
      if (!entry.isIntersecting) {
        element.classList.add('fixed-top');
      } else {
        element.classList.remove('fixed-top');
      }
    });
  },
  {threshold: [0]}
);

const sentinel = document.createElement('div');
document.body.appendChild(sentinel);
observer.observe(sentinel);

保持布局稳定的解决方案

置顶元素可能会影响页面布局，添加占位元素可以避免内容跳动：

const originalElement = document.querySelector('.sticky-header');
const placeholder = document.createElement('div');
placeholder.style.height = originalElement.offsetHeight + 'px';
originalElement.parentNode.insertBefore(placeholder, originalElement);

window.addEventListener('scroll', function() {
  if (window.scrollY > 100) {
    originalElement.classList.add('fixed');
    placeholder.style.display = 'block';
  } else {
    originalElement.classList.remove('fixed');
    placeholder.style.display = 'none';
  }
});

响应式设计的考虑

在不同屏幕尺寸下，可能需要调整置顶行为。通过媒体查询可以控制置顶功能的启用：

function handleSticky() {
  const mq = window.matchMedia('(min-width: 768px)');
  const element = document.querySelector('.sticky-element');

  if (mq.matches) {
    window.addEventListener('scroll', stickyHandler);
  } else {
    window.removeEventListener('scroll', stickyHandler);
    element.classList.remove('fixed-top');
  }
}

window.addEventListener('resize', handleSticky);
handleSticky(); // 初始化