移动端滚动时隐藏div功能失效，寻求排查及解决建议

看起来你遇到的这个问题很典型，我帮你拆解下可能的原因并给出针对性的修复方案：

核心问题排查 #

1. WordPress的jQuery冲突问题
   WordPress默认启用了jQuery的noConflict模式，这意味着你不能直接用$作为jQuery的别名，必须用jQuery或者手动映射别名。你的代码里直接使用$，这大概率是导致脚本完全不执行的关键原因。

2. DOM未就绪就执行代码
   你的脚本嵌套在.mobile-like元素内部，可能在DOM完全加载完成前就运行了，导致无法正确找到目标元素。

3. 滚动事件逻辑的小瑕疵
   当前的滚动判断逻辑可能会因为滚动速度波动出现频繁触发的情况，初始滚动位置的设置也可以更严谨。

修复后的代码示例 #

我针对上述问题对代码做了调整，你可以直接替换使用：

<div class="sticky"> 
  <div class="container"> 
    <div class="row top"> 
      <div class="col-md-12 taCenter"> 
        <div class="logotip"> 
          <a href="<?= get_site_url() ?>"><img class="desktop_logo" src="http://dev128.nadlani.si/wp-content/uploads/2019/05/NaDlani_284_94.png"></a> 
          <a href="<?= get_site_url() ?>"><img class="mobile_logo" src="http://dev128.nadlani.si/wp-content/uploads/2019/05/NADLANI_2019_mobile.png"></a> 
          <div class="mobile-like">
            <div class="fb-like" data-href="https://www.facebook.com/nadlani.si/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
          </div> 
        </div> 
        <div class="menu-trigger-wrapper"> 
          <ul class="menu"> 
            <?php foreach ($tree as $item) { echo '<li>'; echo '<a href="' . $item["url"] . '">'; echo $item["title"]; echo '</a>'; echo '</li>'; } ?> 
          </ul> 
          <div class="trigger"> 
            <i class="fa fa-bars"></i> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

<!-- 把脚本移到页面底部，确保DOM加载完成后执行 -->
<script>
// 用闭包映射jQuery到$，解决WordPress的noConflict限制
(function($) {
    var senseSpeed = 5;
    var previousScroll = $(window).scrollTop(); // 初始值设为当前滚动位置，避免首次滚动误触发

    $(window).scroll(function(event) {
        var scroller = $(this).scrollTop();
        
        // 向下滚动且超过阈值，隐藏元素
        if (scroller > previousScroll + senseSpeed) {
            $(".mobile-like").not(":animated").slideUp();
        } 
        // 向上滚动且超过阈值，显示元素
        else if (scroller < previousScroll - senseSpeed) {
            $(".mobile-like").not(":animated").slideDown();
        }
        
        previousScroll = scroller;
    });
})(jQuery);
</script>

额外优化建议 #

• 添加移动端判断：如果只需要在移动端触发这个功能，可以加上屏幕宽度判断，避免在桌面端无效执行：

  if ($(window).width() < 768) {
      // 这里放滚动事件的逻辑代码
  }
  

• 节流滚动事件：滚动事件触发频率极高，添加节流函数可以减少性能消耗，避免页面卡顿：

  function throttle(func, delay) {
      let timer = null;
      return function() {
          if (!timer) {
              timer = setTimeout(() => {
                  func.apply(this, arguments);
                  timer = null;
              }, delay);
          }
      };
  }
  
  // 用节流包装滚动事件
  $(window).scroll(throttle(function(event) {
      // 原滚动逻辑代码
  }, 100));
  

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