点击关闭叉号后，如何停止滚动触发的元素显示函数运行？

嘿，我来帮你搞定这个需求！你现在的代码里，滚动事件是一直绑定在window上的——哪怕你点击叉号隐藏了.try-pula，只要滚动高度超过700px，这个事件就会再次触发显示逻辑。要解决这个问题，有两种简单且常用的方案，我给你详细说说：

方案一：用状态标记控制（推荐，灵活度高） #

我们可以加一个变量来记录这个元素是否已经被用户关闭，之后在滚动事件里先判断这个状态，只有当元素没被关闭时，才执行显示操作：

// 初始化状态：元素未被关闭
let isBarClosed = false;

// 页面加载时先隐藏元素
jQuery(".try-pula").hide("fast");

// 绑定滚动事件
$(window).scroll(function() {
  // 如果已经被关闭，直接跳出函数，不执行后续逻辑
  if (isBarClosed) return;

  const scrollHeight = $(window).scrollTop();
  if (scrollHeight > 700) {
    jQuery(".try-pula").fadeIn(); // 这里用fadeIn()比show("fade")更标准哦
  }
});

// 点击关闭叉号时更新状态并隐藏元素
jQuery("#cross").click(function() {
  jQuery(".try-pula").hide();
  // 标记为已关闭，后续滚动就不会再触发显示了
  isBarClosed = true;
});

这个方案的优势： #

状态标记的方式不会移除滚动事件，如果你之后需要重新让这个元素在滚动时显示（比如加个“重新显示”按钮），只需要把isBarClosed设回false就行，非常灵活。

方案二：直接解绑滚动事件（一次性关闭） #

如果确定用户关闭后永远不需要再看到这个元素，我们可以直接把绑定在window上的滚动事件解绑掉，这样后续滚动就完全不会触发相关逻辑了：

// 页面加载时先隐藏元素
jQuery(".try-pula").hide("fast");

// 把滚动事件处理函数单独命名，方便后续解绑
function showPulaOnScroll() {
  const scrollHeight = $(window).scrollTop();
  if (scrollHeight > 700) {
    jQuery(".try-pula").fadeIn();
  }
}

// 绑定滚动事件
$(window).scroll(showPulaOnScroll);

// 点击关闭叉号时隐藏元素并解绑滚动事件
jQuery("#cross").click(function() {
  jQuery(".try-pula").hide();
  // 解绑指定的滚动事件处理函数
  $(window).off("scroll", showPulaOnScroll);
});

这个方案的特点： #

一旦解绑，滚动事件就彻底失效了，适合确定不需要再次触发的场景，性能上也会略好一点（少了一个事件监听）。

另外提个小细节：你原代码里的show("fade")其实不是jQuery的标准写法，用fadeIn()可以更稳定地实现淡入动画效果哦～

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