【前端开发实例】HTML 移动端固定悬浮半透明搜索框 -（三）

本文链接：https://blog.youkuaiyun.com/JasonAPoint/article/details/78253719

本文介绍了如何在移动端商城系统中创建一个固定在顶部、半透明悬浮的搜索框。关键点包括使用fixed定位，设置opacity透明度。通过HTML和CSS构建静态搜索框，并利用jQuery实现输入动效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Question. 问题

在移动端商城系统中，我们常常看到位于页面顶部有一个搜索框，这类搜索框博主比较喜欢的是固定在页面顶部，半透明悬浮，能依稀看见部分轮播图的形式。

这里写图片描述

要制作这样的搜索框，技术关键在于：

fixed 搜索框定位
opacity 设置透明度

Solution. 解决

首先我们定义一个 html 片段：

<!-- 搜索框 -->
<header class="bar">
  <form name="search" class="search" id="search" action="">
    <div class="search-row">
      <input type="search" name="word" id="word">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">搜索</span></span>
    </div>
  </form>
</header>
<!-- 一个背景图 实际上这里往往是轮播图 -->
<div class="background">
  <img src="bg.jpg">
</div>

header 标签为搜索框，下面的 div 为一个背景图。

同时附上 CSS 样式：

<style type="text/css">
body {
  margin: 0;  padding: 0;
  font-size: 14px; font-family: "microsoft yahei",'Arial', 'Verdana','Helvetica', sans-serif;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
  height: 44px; padding: 0 10px;
  background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */
  z-index: 10;
}
.bar form {
  display: block; padding: 0;margin: 0;
}
.search-row {
  position: relative;
  height: 30px; padding: 7px 0;