移动端客服功能仅在滚动至页面80%底部时显示的实现求助

我明白你现在的困扰——这个客服栏时好时坏确实闹心！咱们先拆解下你现有代码的几个核心问题：

• 用固定像素值（比如3900）判断滚动位置，不同页面高度下会失效
• counter变量只让触发一次，滚动回顶部后再往下滚就不会重新显示
• 动态往body里插style标签容易造成样式冲突，不好维护
• 用float布局在移动端容易出现排版问题

下面给你一套稳定可靠的实现方案，完全满足「仅移动端显示+滚动到页面80%底部才出现」的需求：

1. 优化后的HTML结构 #

咱们保留原有功能，把布局改成flex，移动端更稳定：

<div id="mobile_footer" class="mobile_footer">
  <div class="sticky_class">
    <div class="sticky_item">
      <a href="mailto:ecommerce@vlcsolutions.com">
        <img src="footer_image/Message.png" alt="发送邮件"/>
      </a>
    </div>
    <div class="sticky_item">
      <a href="./contactus.php">
        <img src="footer_image/MAN.png" alt="联系我们"/>
      </a>
    </div>
    <div class="sticky_item">
      <a href="tel:16304479852">
        <img src="footer_image/PHONE.png" alt="拨打电话"/>
      </a>
    </div>
  </div>
</div>

2. 更清晰的CSS样式 #

默认隐藏客服栏，仅在移动端媒体查询里设置样式，用flex代替float：

/* 默认隐藏，移动端由JS控制显示 */
.mobile_footer {
  display: none;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .mobile_footer.show {
    display: block;
  }

  .sticky_class {
    width: 100%;
    padding: 0;
    position: fixed;
    bottom: 0;
    background-color: #046d9f;
    height: 65px;
    z-index: 999; /* 确保不会被其他元素覆盖 */
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .sticky_item {
    width: 30%;
    text-align: center;
  }

  .sticky_item img {
    /* 可以给图片加个最大宽度，防止溢出 */
    max-width: 40px;
    max-height: 40px;
  }
}

3. 稳定的JavaScript逻辑 #

核心是计算**页面可滚动高度的80%**作为触发阈值，监听滚动和窗口 resize 事件，实时更新显示状态，还加了防抖避免性能问题：

$(document).ready(function() {
  // 获取客服栏元素
  const mobileFooter = $('#mobile_footer');
  // 防抖函数，避免滚动/resize时频繁触发
  function debounce(func, delay = 100) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  }

  // 计算滚动阈值并判断是否显示客服栏
  function checkScrollPosition() {
    // 仅在移动端执行
    if ($(window).width() > 768) {
      mobileFooter.removeClass('show');
      return;
    }

    // 计算页面可滚动总高度：页面总高度 - 视口高度
    const scrollableHeight = $(document).height() - $(window).height();
    // 80%的滚动阈值
    const threshold = scrollableHeight * 0.8;
    // 当前滚动距离
    const currentScroll = $(window).scrollTop();

    // 滚动超过阈值就显示，否则隐藏
    if (currentScroll >= threshold) {
      mobileFooter.addClass('show');
    } else {
      mobileFooter.removeClass('show');
    }
  }

  // 监听滚动和resize事件，用防抖优化性能
  $(window).on('scroll', debounce(checkScrollPosition));
  $(window).on('resize', debounce(checkScrollPosition));

  // 页面加载时先执行一次，确保初始状态正确
  checkScrollPosition();
});

关键改进点说明 #

• 动态计算阈值：不再用固定像素，而是根据页面实际高度计算80%的位置，适配所有页面长度
• 防抖处理：滚动和resize事件会频繁触发，防抖能减少函数执行次数，提升页面流畅度
• 样式类控制：用show类来控制显示/隐藏，避免动态插入style标签造成的样式冲突
• flex布局：比float更适合移动端横向布局，不会出现排版错乱
• 实时适配窗口大小：窗口切换到桌面端时自动隐藏，切回移动端时重新判断滚动位置

这样修改后，客服栏就会稳定地在移动端滚动到80%底部时显示，滚动回上方时隐藏，再也不会出现时灵时不灵的问题啦！

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