如何用jQuery以vh替代px实现滚动导航栏淡入效果？

当然可以！你完全可以通过jQuery获取浏览器视窗高度，来替代代码里固定的860px，实现滚动到100vh位置时触发导航栏的淡入效果。

核心思路 #

• 用$(window).height()获取当前视窗的高度（这就是100vh对应的像素值）
• 将这个动态获取的值替换原代码中的固定px数值
• 可选：给scroll事件添加防抖处理，避免频繁触发函数影响页面性能

修改后的代码 #

(function($) {
  $(document).ready(function(){
    // 获取视窗高度，对应100vh
    let windowHeight = $(window).height();
    
    // 防抖函数，优化scroll事件性能
    let scrollTimeout;
    $(window).scroll(function(){
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(function() {
        if ($(this).scrollTop() > windowHeight) {
          $('#navbar').fadeIn(200);
        } else {
          $('#navbar').fadeOut(200);
        }
      }, 50); // 50ms的延迟可根据需求调整
    });

    // 监听窗口大小变化，实时更新视窗高度
    $(window).resize(function() {
      windowHeight = $(window).height();
    });
  });
})(jQuery);

关键说明 #

• $(window).height()会获取当前浏览器窗口的高度，加上resize事件监听后，用户调整窗口大小时，视窗高度会自动同步更新，保证触发位置始终是100vh。
• 防抖函数的作用是减少scroll事件的触发频率——浏览器的scroll事件会在滚动过程中多次触发，防抖能让函数只在滚动停止或暂停时执行，避免不必要的性能消耗。

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