jQuery代码仅在滚动时生效，页面刷新后无效果，如何实现刷新触发？

嘿，我来帮你搞定这个问题～你的代码现在只有在滚动页面的时候才会执行判断逻辑，但页面刷新后如果已经处于某个滚动位置，因为没触发scroll事件，所以那些元素的状态不会更新对吧？

核心问题是：我们需要让判断逻辑不仅在滚动时运行，还要在页面首次加载完成后就自动执行一次。另外，你原来的代码写了两个$(document).ready，其实可以合并成一个，代码会更整洁。

具体修改方案： #

• 把两个滚动事件里的判断逻辑，分别封装成独立的函数
• 页面加载完成后，先主动调用这些函数一次，确保刷新时就能根据当前滚动位置设置元素状态
• 滚动事件触发时，再调用这些函数，保持原来的滚动响应逻辑
• 注意：你的选择器比如$("main-pic-bg")大概率有问题——如果是类选择器要加.（比如$(".main-pic-bg")），ID选择器要加#（比如$("#main-pic-bg")），不然jQuery会把它当成HTML标签名去找，而原生HTML里没有main-pic-bg这种标签哦！

修改后的完整代码： #

$(document).ready(function(){ 
  // 封装第一个滚动判断逻辑
  function handleFirstScrollCheck() {
    if ($(document).scrollTop() > 250) { 
      $(".main-pic-bg").fadeIn("slow"); 
    } else { 
      $(".main-pic-bg").hide("slow"); 
    }
  }

  // 封装第二个滚动判断逻辑
  function handleSecondScrollCheck() {
    if ($(document).scrollTop() > 650) { 
      $(".fullscreen-bg-video").hide(); 
      $(".main-pic-bg-title").addClass("load2"); 
      $(".main-pic-bg-content1").addClass("load2"); 
    } else { 
      $(".fullscreen-bg-video").show("slow"); 
      $(".main-pic-bg-title").removeClass("load2"); 
      $(".main-pic-bg-content1").removeClass("load2"); 
    }
  }

  // 页面加载完成后先执行一次，确保刷新时生效
  handleFirstScrollCheck();
  handleSecondScrollCheck();

  // 滚动时再执行这两个判断
  $(window).scroll(function() { 
    handleFirstScrollCheck();
    handleSecondScrollCheck();
  }); 
}); 

额外优化小建议： #

你原来的代码里重复写了两次$("main-pic-bg").fadeIn("slow");，其实写一次就够啦，我已经帮你去掉重复的部分了～

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