看起来你的滚动触发弹窗脚本出现了几个核心问题，结合WordPress的环境特性，咱们一步步拆解修复：

1. 问题根源拆解 #

（1）scroll事件仅绑定一次 #

你用了$(window).one('scroll', function() {...})，这个方法的特性是事件只会触发一次，触发后就自动解绑监听。如果用户第一次滚动没达到100px的阈值，后续再滚动超过阈值时，事件已经失效，自然不会触发弹窗；而你在滚动到一半（已超过100px）时刷新页面，浏览器可能会恢复之前的滚动位置，此时页面加载后会触发一次滚动动作，刚好命中这个仅执行一次的逻辑，所以看起来生效了。

（2）页面初始化时未检查滚动位置 #

脚本只监听滚动动作，但如果用户打开页面时，浏览器自动恢复了之前的滚动位置（已超过100px），此时没有滚动动作触发事件，脚本也不会执行弹窗显示逻辑。

（3）动画与display属性冲突 #

你同时使用了css({display: 'flex'})和fadeIn()，但fadeIn()默认会把元素的display设为block，这会覆盖你设置的flex，导致弹窗布局可能出现异常。

2. 修复后的完整脚本 #

我调整了逻辑，解决了上述所有问题，同时适配WordPress的jQuery环境：

jQuery(function($) {
    // 把弹窗控制逻辑抽成独立函数，方便复用
    function handlePopupDisplay() {
        const scrollTop = $(window).scrollTop();
        const $popup = $('.popup');
        const contentEl = document.getElementById('content');

        if (scrollTop > 100) {
            // 先设置display:flex，再执行淡入（避免fadeIn强制改为block）
            $popup.css({display: 'flex'}).fadeIn();
            contentEl.style.display = "none";
        } else {
            // 淡入完成后再修改display，避免布局跳动
            $popup.fadeOut(function() {
                $(this).css({display: 'none'});
            });
            contentEl.style.display = "block";
        }
    }

    // 页面加载完成后立即检查一次滚动位置
    handlePopupDisplay();

    // 改用on持续监听scroll事件，替换one的单次绑定
    $(window).on('scroll', function() {
        handlePopupDisplay();
    });

    // 弹窗关闭逻辑保留，移除弹窗后恢复内容显示
    $('.popup-link').on('click', function(){
        $(this).closest(".popup").remove();
        document.getElementById('content').style.display = "block";
    });
});

3. 额外优化建议 #

• 为了避免滚动事件频繁触发导致性能问题，可以添加防抖处理：

  // 防抖函数，控制事件触发频率
  function debounce(func, delay = 100) {
      let timeoutId;
      return function() {
          clearTimeout(timeoutId);
          timeoutId = setTimeout(func, delay);
      };
  }
  
  // 替换原scroll监听
  $(window).on('scroll', debounce(handlePopupDisplay));
  

• 确保.popup元素的初始CSS是display: none;，避免页面加载时出现弹窗闪烁。

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