js实现sticky
使用 position: sticky 实现粘性定位
通过 CSS 的 position: sticky 属性可以轻松实现元素在滚动时的粘性效果。需要设置 top、bottom、left 或 right 值来定义粘性触发的位置。
.sticky-element {
position: sticky;
top: 0;
background: #fff;
z-index: 100;
}HTML 结构示例：
<div class="container">
<div class="sticky-element">粘性元素</div>
<div class="content">其他内容...</div>
</div>使用 JavaScript 实现备用方案
在不支持 position: sticky 的浏览器中，可以通过监听滚动事件动态修改元素的 position 属性。
const stickyElement = document.querySelector('.sticky-element');
const offsetTop = stickyElement.offsetTop;
window.addEventListener('scroll', () => {
if (window.pageYOffset >= offsetTop) {
stickyElement.style.position = 'fixed';
stickyElement.style.top = '0';
} else {
stickyElement.style.position = 'static';
}
});优化性能的方案
频繁触发滚动事件会影响性能，可以通过节流函数优化。
function throttle(func, limit) {
let inThrottle;
return function() {
if (!inThrottle) {
func.apply(this, arguments);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
window.addEventListener('scroll', throttle(handleScroll, 100));
function handleScroll() {
// 滚动处理逻辑
}处理边缘情况
需要考虑父容器边界、动态内容变化等情况。以下代码检测元素是否在可视区域内：
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
);
}使用 Intersection Observer API
现代浏览器支持的更高效方法：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
entry.target.classList.toggle('is-sticky', !entry.isIntersecting);
});
},
{threshold: [0]}
);
observer.observe(document.querySelector('.sticky-trigger'));对应的 CSS：
.sticky-element {
position: static;
}
.sticky-element.is-sticky {
position: fixed;
top: 0;
}
