如何设置百分比滚动阈值：页面滚动至200%前显示div，超出后隐藏

首先，你当前代码里的{percent:200}是无效语法，因为scrollTop()返回的是像素数值，没法直接识别百分比格式。我们得先把“200%”的阈值转换成对应的像素值，再做判断逻辑。

核心思路 #

要实现“滚动至200%前显示，超过后隐藏”，首先得明确「200%」的基准：

• 通常这里的200%指视口高度的200%（也就是向下滚动2个屏幕的高度），这是最符合常规需求的理解；
• 如果是指文档总高度的200%，技术上没什么实际意义——因为滚动的最大距离是文档高度减去视口高度，根本不可能超过文档总高度。

下面是优化后的代码实现：

优化后的代码 #

// 节流函数，优化滚动事件性能（避免频繁触发导致卡顿）
function throttle(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

// 缓存DOM元素，减少重复查询
const $box = $('.box');

// 滚动逻辑处理函数
function handleScroll() {
  // 计算200%视口高度的阈值（可根据需求调整基准）
  const viewportHeight = $(window).height();
  const scrollThreshold = viewportHeight * 2; // 200%视口高度

  // 判断滚动位置并执行显示/隐藏
  if ($(window).scrollTop() > scrollThreshold) {
    $box.fadeOut();
  } else {
    $box.fadeIn();
  }
}

// 绑定节流后的滚动事件
$(window).scroll(throttle(handleScroll, 100));

// 监听窗口 resize 事件，确保窗口大小变化时阈值重新计算
$(window).resize(throttle(handleScroll, 100));

关键说明 #

1. 百分比转像素：通过$(window).height()获取当前视口高度，乘以2得到200%对应的像素值，作为滚动判断的阈值；
2. 性能优化：用节流函数throttle把滚动事件的触发频率限制在100ms一次，避免频繁的DOM操作拖慢页面；
3. 窗口适配：监听resize事件，窗口大小改变时重新计算阈值，保证逻辑在不同屏幕尺寸下都能正常工作；
4. 可选调整：如果你的「200%」是基于文档总高度（这种场景很少见），可以把阈值改成$(document).height() * 2，但要注意此时可能永远不会触发隐藏——因为滚动的最大距离远小于这个值。

额外小技巧 #

如果希望动画更平滑，可以给.box元素加个CSS过渡效果，和jQuery的fadeIn/fadeOut搭配起来会更自然：

.box {
  transition: opacity 0.3s ease;
}

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