本文介绍如何使用 jQuery 在页面滚动且视口宽度大于 768px（即桌面设备）时，为 添加 header-scroll 类；并在不满足条件时移除该类，确保移动端不触发，提升响应式体验。
本文介绍如何使用 jquery 在页面滚动且视口宽度大于 768px（即桌面设备）时，为 `
在构建响应式网站时，常需为桌面端实现“滚动吸顶”或“滚动变色”等交互效果，而避免在移动设备上启用——因为小屏幕下频繁 DOM 操作可能影响性能，且手势滚动行为更复杂。jQuery 提供了简洁的 API 来实现这一逻辑，关键在于将滚动监听与视口宽度判断合理结合。
以下是一个健壮、可直接使用的实现方案：
$(document).ready(function() {
function handleScroll() {
const scrollTop = $(window).scrollTop();
const isDesktop = $(window).width() > 768;
if (scrollTop > 102 && isDesktop) {
$('header').addClass('header-scroll');
} else {
$('header').removeClass('header-scroll');
}
}
// 绑定滚动事件
$(window).on('scroll', handleScroll);
// 可选：监听窗口大小变化（防用户缩放或横竖屏切换）
$(window).on('resize', function() {
// 避免 resize 频繁触发，简单节流（生产环境建议用 debounce）
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(handleScroll, 200));
});
// 页面加载时立即执行一次，确保初始状态正确
handleScroll();
});
✅ 关键说明与最佳实践：
- $(window).width() 是响应式判断的核心：它返回当前视口宽度（不含滚动条），比 screen.width 或媒体查询 JS 模拟更直观可靠；
- 避免在 scroll 中重复计算 $(window).width()：已封装进 handleScroll 函数并复用，提升可读性与性能；
- 添加 resize 监听是重要补充：当用户调整浏览器窗口（如从全屏拖为窄窗），需重新评估是否仍处于桌面模式；
- 首次加载调用 handleScroll()：防止页面刷新后位于滚动位置但样式未生效；
-
CSS 配合示例（供参考）：
header.header-scroll { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: fixed; top: 0; width: 100%; z-index: 1000; }
⚠️ 注意事项：
- jQuery 版本建议 ≥ 3.0（本例使用 3.7.0），确保兼容现代浏览器；
- 若项目已迁移到原生 JS，可用 window.innerWidth + window.addEventListener('scroll', ...) 替代，进一步减小依赖；
- 在高频率滚动场景（如长列表页），可引入 requestAnimationFrame 节流优化，但本例中阈值判断简单，常规使用无需过度优化。
该方案简洁、稳定、兼顾可维护性，适用于大多数基于 jQuery 的响应式前端项目。
