打造微信首页般流畅的移动端搜索框滑动效果

本文将介绍如何实现一个类似微信首页搜索框的优雅滑动隐藏和显示效果。 目标效果：上滑时搜索框平滑隐藏或显示，下滑时搜索框保持隐藏状态。

实现思路：

核心在于监听页面滚动事件，并根据搜索框高度和滚动偏移量动态控制其显示状态。 具体来说：

1. 获取关键值： 获取搜索框高度 (offsetHeight) 和页面滚动距离 (scrollTop)。
2. 判断隐藏或显示： 如果搜索框被遮挡的高度小于其自身高度的一半，则显示搜索框；否则，隐藏搜索框。
3. 处理滚动停止： 使用 setTimeout 或其他方式检测滚动停止，确保搜索框状态稳定。

代码示例 (改进版)：

Wechat MP Article Stats Comments Suite - 微信公众号管理套件

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

<code class="javascript">function handleScroll() {
  const searchBox = document.querySelector('.search-box');
  const offsetHeight = searchBox.offsetHeight;
  const scrollTop = document.documentElement.scrollTop;
  let isScrolling = false;

  if (offsetHeight / 2 > scrollTop) {
    searchBox.classList.remove('hidden');
  } else {
    searchBox.classList.add('hidden');
  }

  clearTimeout(scrollTimer); // 清除之前的定时器
  isScrolling = true; // 设置滚动状态
  scrollTimer = setTimeout(() => {
    isScrolling = false; // 滚动停止
  }, 100); // 100毫秒后判断滚动是否停止
}


let scrollTimer; // 定时器变量
window.addEventListener('scroll', handleScroll);</code>

CSS样式 (示例)：

<code class="css">.search-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out; /* 添加平滑过渡 */
}

.search-box.hidden {
  transform: translateY(-100%); /* 完全隐藏 */
}</code>

改进说明：

• 平滑过渡： 添加 CSS transition 属性，使搜索框隐藏和显示过程更加平滑。
• 滚动停止检测： 使用 setTimeout 和 isScrolling 变量更准确地判断滚动停止，避免频繁切换状态。
• 代码优化： 代码结构更清晰，可读性更好。

效果演示：

页面demo (请替换为实际demo链接)

通过以上步骤和改进后的代码，您可以轻松实现一个优雅的移动端搜索框滑动隐藏和显示效果，提升用户体验。 记住根据实际需求调整 CSS 样式和 JavaScript 代码。