移动端搜索框如何实现微信首页般优雅的滑动隐藏和显示效果？-css教程-PHP中文网

移动端搜索框如何实现微信首页般优雅的滑动隐藏和显示效果？

花韻仙語

发布： 2025-02-25 11:36:19

原创

1168人浏览过

移动端搜索框如何实现微信首页般优雅的滑动隐藏和显示效果？

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

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

实现思路：

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

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

代码示例 (改进版)：

<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样式 (示例)：

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

<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>

登录后复制

改进说明：