如何通过JavaScript检测滚动行为，实现页面上滑时立即恢复元素原有样式

解决方法 #

你的原有代码仅通过滚动高度与阈值的对比判断是否添加类，缺少滚动方向的判断逻辑，我们只需要新增变量记录上一次的滚动位置，根据滚动方向做对应处理即可：

修改后的JavaScript代码 #

let title = document.querySelector('.title');
// 新增变量存储上一次的滚动位置
let lastScrollY = window.scrollY;

function move(){
  let currentScrollY = window.scrollY;
  let moveTo = title.offsetTop + title.clientHeight / 2;
  // 判断滚动方向
  if (currentScrollY > lastScrollY) {
    // 向下滚动时才执行阈值判断
    if(currentScrollY > moveTo){
      title.classList.add('fixedTop');
    }
  } else {
    // 向上滚动时直接移除类，恢复原始样式
    title.classList.remove('fixedTop');
  }
  // 更新上一次滚动位置
  lastScrollY = currentScrollY;
}

window.addEventListener('scroll', move);

可选优化 #

当前的fixed定位会让标题元素脱离文档流，触发fixed时页面下方的内容会突然向上跳动100px（标题高度），你可以给.wrap元素添加对应高度的padding避免这个问题：

.content .wrap.fixed-active {
  padding-top: 100px;
}

然后在添加fixedTop类的同时给wrap添加fixed-active类，移除fixedTop时同步移除该类即可。

内容的提问来源于stack exchange，提问作者AWEI