页面加载时div初始显示异常，滚动后才触发预期显示逻辑的问题

咱们先拆解你遇到的两个核心问题：

1. 页面加载时.mobileEnquiry默认可见，不符合你想要的初始隐藏状态
2. 滚动逻辑和你的需求完全颠倒了（当前代码是滚动超过800px时隐藏元素，小于800px时显示，和你说的“滚动超过设定位置滑入视野”正好相反）

问题根源 #

• 初始状态未初始化：你的CSS里.mobileEnquiry默认是display: flex，而且页面加载时没有立刻执行状态判断，只有滚动事件触发后才会修改元素的显示状态，所以一开始它会一直显示，直到你第一次滚动。
• 逻辑判断颠倒：你想要的是“滚动超过800px时滑入”，但代码里写的是y > 800时执行slideUp()（隐藏），else时slideDown()（显示），完全搞反了逻辑。

修复后的完整代码 #

JavaScript

jQuery(document).ready(function ($) {
  // 提取状态更新逻辑为独立函数，方便复用
  function updateMobileEnquiryState() {
    var y = $(document).scrollTop();
    // 纠正逻辑：滚动超过800px时滑入，否则隐藏
    if (y > 800) {
      $('.mobileEnquiry').slideDown();
    } else {
      $('.mobileEnquiry').slideUp();
    }
  }

  // 页面加载完成后立刻执行一次，初始化元素状态
  updateMobileEnquiryState();

  // 绑定滚动事件，触发状态更新
  $(document).scroll(updateMobileEnquiryState);
})

CSS

body { height: 1200px }
/* 设置初始状态为隐藏，配合JS初始化避免页面加载时的元素闪烁 */
.mobileEnquiry { display: none; position: fixed; z-index: 999999; bottom: 0; width: 100%; color: #fff; text-transform: uppercase; font-weight: 600; font-size: 11px; background-color: red; height: 100px }

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobileEnquiry"></div>

关键优化点 #

• 复用逻辑函数：把状态判断抽成独立函数，既方便后续维护，又能在页面加载和滚动时重复调用。
• 初始化执行：页面加载完成后立刻触发状态更新，确保初始状态符合你的预期。
• 修正逻辑判断：调换slideUp和slideDown的触发条件，匹配你“滚动超过设定位置滑入”的需求。
• CSS初始状态：将.mobileEnquiry的默认display改为none，避免页面加载瞬间的元素闪烁问题。

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