如何在JavaScript中用VH单位替换脚本里的100和101数值？

开发者阿泽

2026-5-27

解决将滚动触发值从像素替换为VH单位的问题

这个问题的核心在于：scrollTop()返回的是像素数值，而vh是相对视口高度的CSS单位，浏览器不会自动把vh转换成JavaScript能识别的像素值，所以你需要手动计算对应vh的像素数。

具体解决方案

首先，我们需要把vh单位转换成像素：1vh等于视口高度的1%，所以可以通过$(window).height() / 100得到1vh对应的像素值，再乘以你想要的vh数值（比如10vh就是$(window).height() * 0.1）。

另外，别忘了监听窗口resize事件——当视口高度变化时，vh对应的像素值也会改变，这样能保证触发逻辑始终准确。

修改后的代码如下：

$(document).ready(function() {
  // 封装一个函数，把vh值转换成像素
  function vhToPixels(vh) {
    return $(window).height() * (vh / 100);
  }

  // 同时监听scroll和resize事件
  $(window).on('scroll resize', function () {
    const currentScroll = $(window).scrollTop();
    // 这里设置你想要的VH触发值，比如10vh
    const triggerVh = 10;
    const triggerPixel = vhToPixels(triggerVh);

    console.log(currentScroll);
    
    // 保持原逻辑：超过触发值添加类，小于触发值+1移除类
    if (currentScroll > triggerPixel) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if (currentScroll < triggerPixel + 1) {
      $('#nav_bar').removeClass('navbar-fixed');
    }

    // 如果你想简化逻辑，可以用toggleClass一行搞定（效果和原逻辑一致）
    // $('#nav_bar').toggleClass('navbar-fixed', currentScroll > triggerPixel);
  });
});