js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度、有道、爱奇艺等的搜索框都有一个特点，滑动到刚好看不到搜索框时，固定搜索框到顶部，这也算是一个对用户友好型的操
作。
在看了百度的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实现百度搜索框滑动固定顶部的更多相关文章
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- JS---DOM---案例：模拟百度搜索框
模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...
- React实现最完整的百度搜索框
import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决
--------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
随机推荐
- AngularJS——第5章 作用域
第5章 作用域 通常AngularJS中应用(App)是由若干个视图(View)组合成而成的,而视图(View)又都是HTML元素,并且HTML元素是可以互相嵌套的,另一方面视图都隶属于某个控制器(C ...
- Java遍历文件夹下的所以文件
利用Java递归遍历文件夹下的所以文件,然后对文件进行其他的操作.如:对文件进行重命名,对某一类文件进行重编码.可以对某一工程下的全部.java文件进行转码成utf-8等 代码如下,这里只对文件进行重 ...
- centos7下apache2.4反向代理
apache安装目录在/data/apache24,这里就不介绍apache的安装了. 一.反向代理配置 在/data/apache24/conf/extra下创建htttpd-proxy.conf文 ...
- 【gRPC使用问题3】生成出来无法识别Google.Api.AnnotationsReflection.Descriptor
1.问题截图: 2.解决方案: Install the package "Google.Api.Gax.Grpc". From the Package Manager Consol ...
- MVC的Forms登录验证
第一步:修改web.config配置 在 <system.web>节点下加入配置:未登录的用户跳转到/Home/Login,登录后跳转到/Home/UserCenter,登录后票证记录到c ...
- js文件，同样的路径，拷贝过来的为什么不能访问
从解决方案管理器中拖过来的可以直接访问,而从 bundleconfig中拷贝过来后修改的就访问不到. 如下: 引用一: <script src="~/Content/Plugins/j ...
- maven项目打包发布到私有仓库
在项目开发中通常会引用其他的jar,怎样把自己的项目做为一个jar包的形式发布到私服仓库中,主要有以下三个步骤 (怎样配置maven私服仓库,就不再这里说明了,可以参考以前的文章)1.在maven的s ...
- vs 调试 IE显示“无法显示该网页
在用VS2010调试网站的时候,突然页面不能正常显示了,IE显示“无法显示该网页”.症状一: IE地址栏里面显示的端口号和桌面任务栏右下角“ASP.NET Development Server”的端口 ...
- windows下git的使用方法（码云）
这表文章主要是用了可视化操作: 使用命令行操作:https://www.cnblogs.com/mswyf/p/9370238.html 一.安装Git Bash 为了在windows下使用Git,我 ...
- [最新原创电子书]lazarus开发者入门及中级教程
目前市面上没有任何一本完整的书,介绍Lazarus,Firebird这两个优秀的开发工具,同时还有一个作为他们之间桥梁的开发套件ZeosDBO,也没有任何完整的中文开发指南,本书以这三种开发套件为主线 ...