现在很多主流系统例如百度、有道、爱奇艺等的搜索框都有一个特点，滑动到刚好看不到搜索框时，固定搜索框到顶部，这也算是一个对用户友好型的操

作。





在看了百度的js和css后自己摸索出来实现效果，还是学艺不精，没读懂百度的js，有点小bug。



<!DOCTYPE html>

<html>

<head>

<title>柳絮飞祭奠</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">

div input {

	width: 538px;

	height: 38px;

	border: 1px solid #b8b8b8;

	border-bottom: 1px solid #ccc;

}

.z_s_top_wrap_fix {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 70px !important;

	padding-top: 20px;

	background-color: #fff;

	box-shadow: 0 0 3px 3px #e6e6e6;

	z-index: 2;

}

.z_s_wr_fix {

	margin: auto;

	width: 641px;

	margin-top: 0 !important;

	margin-bottom: 100px;

}

</style>

</head>

<body>

	<div class="z_s_top_wrap" id="z_s_top_wrap">

		<div style="margin:auto;width:1024px;height: 30px;">

			<input id="txt_search_ipt" type="text" style="float: left;"><input type="button" style="height: 42px;float: left;background-color: #388cff;width: 103px;" value="百度一下">

		</div>

	</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

</body>

<script type="text/javascript" src="../plugins/angular/angular.js"></script>

<script type="text/javascript" src="../plugins/jquery/jquery.min.js"></script>

<script type="text/javascript">

	window.onscroll = function() {

		//获取搜索框当前距离顶部位置document.getElementById("z_s_wraa").offsetTop

		//获取滚动条离浏览器顶部位置window.pageYOffse

		if (document.getElementById("txt_search_ipt") == undefined) {

			return false;

		}

		if ($(document).scrollTop() + 30 >= $(document).height()

				- $(window).height()) {

			$("body").height($("body").height() + 20);

		}

		if ((document.getElementById("txt_search_ipt").offsetTop - window.pageYOffset) < 0) {

			//2.2.添加class固定搜索框到顶部

			$("#z_s_top_wrap").addClass("z_s_top_wrap_fix");

			$(".z_s_wr").addClass("z_s_wr_fix");

			$("body").height($("body").height() - 20);

		} else {

			//2.3.移除搜索框固定

			$("#z_s_top_wrap").removeClass("z_s_top_wrap_fix");

			$(".z_s_wr").removeClass("z_s_wr_fix");

		}

	};

</script>

</html>

实现效果





js实现百度搜索框滑动固定顶部的更多相关文章

  1. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  2. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  3. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  4. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  5. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  6. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  7. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  8. window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

    --------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

  9. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

随机推荐

  1. GridView创建菜单栏

    GridView(网格视图)可以用来做九宫图.表格(行列)的视图,因其是网格状的,不用去调整权重,而且单个item可以自定义,因此也可以用来创建菜单栏(图标加文字形式),布局就一个GridView. ...

  2. 34-BigInteger详解

    在用C或者C++处理大数时感觉非常麻烦,但是在Java中有两个类BigInteger和BigDecimal分别表示大整数类和大浮点数类,至于两个类的对象能表示最大范围不清楚,理论上能够表示无线大的数, ...

  3. 【APT】SqlServer游标使用

    use [ElephantCredit] go begin transaction tran_bank; print '**脚本开始执行!'; declare @tran_error int , @n ...

  4. 梦殇 chapter six

    如行尸走肉般的坐在教室,看著书上密密麻麻的字,心却久久不能平静. 自己已经不再是当初那个懵懂,无知的小女孩了.仰望天空45度,让眼泪流回眼睛. 是该告别彷徨,告别懵懂的年纪了. 早些年许下的诺言,如今 ...

  5. echart.js组件编写

    1.传参 <area-chart :chartdata='monitorTimes' :datatype='typeSelected' :dataX = '"tid"' :t ...

  6. opencv 双边模糊,膨胀腐蚀 开 闭操作

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; int main(int argc, ...

  7. Oracle存储过程in、out、in out 模式参数

    Oracle存储过程in.out.in out 模式参数 标签: oracle存储inout参数 2016-11-14 11:59 3272人阅读 评论(0) 收藏 举报  分类: oracle(7) ...

  8. hdu 1539 & poj 1416 某某公司

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1539 大意是输入n和m,把m按顺序拆分成若干个数,问这些数和的在小于n的前提下最大为多少 注意必须m的 ...

  9. centos vncviewer

    CentOS6.5 安装vncserver实现图形化访问   一. 安装gnome图形化桌面 #yum groupinstall -y "X Window System" #yum ...

  10. generic_netlink 用法

    参考资料: https://wiki.linuxfoundation.org/networking/generic_netlink_howto generic_netlink 框架 +-------- ...