JavaScript 浏览器滚动到指定位置使元素悬浮

C端一般会有便捷与用户切换以及筛选或400、客服之类的元素要求滚动到当前位置悬浮，跟随浏览器滚动。我们根据 JavaScript基础语法，编写一个公共函数。

Html

• 定义了一个 div 元素，其 id 为 nav，内容为 400

<div id="nav">400****8888</div>

函数

• 定义了一个名为 menuFixed 的函数，接受一个参数 id，表示要固定的元素的 id
• 使用 document.getElementById(id) 获取指定 id 的元素
• 计算并存储该元素距离页面顶部的距离，保存该变量 _getHeight 中
• 为 window 对象的 onscroll 事件添加一个处理函数，该函数会在用户滚动页面时触发
• 在 onscroll 事件处理函数中，获取当前页面滚动的垂直距离，保存在变量 scrollTop 中，如果 scrollTop 大于或等于 _getHeight 则悬浮，否则将恢复 style，变成固定

function menuFixed(id) {
  const obj = document.getElementById(id);
  const _getHeight = obj.offsetTop;
  window.onscroll = function() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop >= _getHeight) {
      obj.style.position = 'fixed';
      obj.style.top = '0'; // 确保固定在顶部
    } else {
      obj.style.position = 'static'; // 恢复默认位置
    }
  };
}

// 执行函数
window.onload = function() {
  menuFixed('nav');
};

总结：当页面滚动到 nav 的位置时，nav 会固定在页面顶部；当页面滚动回 nav 的初始位置上方时，nav 会恢复到原始位置。