前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: none;
}
body{
/*padding-top: 80px;*/
}
.header{
width: 100%;
height: 70px;
background-color: black;
/*display: none;*/
}
.w{
width: 1210px;
overflow: hidden;
margin: 0 auto;
}
.header ul li{
float: left;
width: 242px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: blue; }
.header ul li a{
display: block;
width: 242px;
height: 70px;
color: #fff;
} /*固定导航栏*/
.header-fix{
width: 100%;
height: 80px;
background-color: white;
box-shadow: 0 0 5px #888;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*margin-bottom: 10px;*/
}
.header-fix .logo{
float: left;
width: 117px;
height: 57px;
padding-top: 23px;
}
.header-fix .fm{
float: left;
width: 700px;
height: 80px;
margin-left: 100px;
}
.fm input[type='text']{
float: left;
width: 578px;
height: 50px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
margin-top: 15px;
padding-left: 20px;
font-size: 20px;
}
.fm input[type='submit']{
float: left;
width: 100px;
height: 52px;
background-color: #38f;
position: relative;
top: 15px;
color: #fff;
line-height: 52px;
font-size: 18px;
}
.box1{
width: 100%;
height: 200px;
background-color: red;
}
.box2{
width: 100%;
height: 300px;
background-color: green;
} </style>
</head>
<body style="height: 2000px">
<div class="header">
<div class="w">
<ul>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>
</div>
<div class="header-fix">
<div class="w">
<div class="logo">
<img src="./logo_top.png" alt="">
</div>
<form class="fm">
<input type="text" name="">
<input type="submit" name="" value="百度一下">
</form>
</div>
</div>
<div class="box1"></div>
<div class="box2"></div> <script type="text/javascript">
window.onload = function(){
var box2Height = document.getElementsByClassName('box2')[0];
var fixBox = document.getElementsByClassName('header-fix')[0];
var headerBox = document.getElementsByClassName('header')[0]; window.onscroll = function(){
console.log(box2Height.offsetTop);
if (document.documentElement.scrollTop >=box2Height.offsetTop) {
fixBox.style.display = 'block';
document.body.style.paddingTop = '80'+ 'px';
headerBox.style.display = 'none';
}else{
fixBox.style.display = 'none';
document.body.style.paddingTop = '0'+ 'px';
headerBox.style.display = 'block';
}
}
}
</script> </body>
</html>
前端 ---- js 模拟百度导航栏滚动案例的更多相关文章
- client , offset , scroll 系列 及百度导航栏案例
1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- JS模拟百度分享侧边栏效果
模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...
- 用sticky.js实现头部导航栏固定
在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...
- 【前端】javascript实现导航栏筋斗云效果特效
实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...
- JS如何实现导航栏的智能浮动
<script language="javascript"> function smartFloat(obj) { var obj = docu ...
- 用JS实现任意导航栏的调用
首先设计一个关于导航的层叠样式表如:body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;backgro ...
- Vue.js模拟百度下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)
一. 各类概念和指令介绍 1. NVM (1). 全称:Node Version Manager,是一款针对Nodejs的版本管理工具,由于Node的版本很多,很多时候我要需要依赖多个版本,并且要求 ...
- ArcGis Python脚本——根据字段内容拆分要素类（shp）为多个
其实,这就是批量执行了ArcToolbox 分析工具-筛选 功能. 先上代码,后做解说: # in_feature:待拆分要素类 # out_folderpath:输出路径,注意最后加“/”以与字段名 ...
- Java面试题系列（四）强引用、软引用、弱引用、幻象引用有什么区别？
序言 资料 https://blog.csdn.net/weixin_38729727/article/details/82259507
- SQL Server 调用 C# 方法实现正则表达式验证
Ø 前言 1. 在 SQL Server 中默认是不支持正则表达式验证的,如果需要某个字符串匹配一个正则表达式的验证规则,就需要额外的编写 C# 方法,并发布到 SQL Server 数据库中. ...
- 二十二、Linux 进程与信号---进程创建
22.1 fork 和 vfork 函数 22.1.1 函数说明 #include <unistd.h> #include <sys/types.h> pid_t fork( ...
- Express 体验 路由、模板引擎、中间件
http://expressjs.com/en/4x/api.html#req.method http://expressjs.com/en/guide/routing.html [Route pat ...
- 【noip 2016】提高组
D1T1.玩具谜题 题目链接 直接模拟就好了……water. #include<cstdio> int n,m,a,s,ans; ];]; int main() { scanf(" ...
- sql库连sql中间库连orcle库增删改查方案
---中间库建立存储过程create procedure Proc_exec@SQL nvarchar(MAX)ASexec(@SQL) GO---web服务器执行语句 --查 select * fr ...
- linux switch 跳转到 ”跳转至 case 标号“ 的错误
参考链接: http://blog.csdn.net/qustdjx/article/details/8636489
- 假设result是一个float型变量，其值为27.32，value是一个int型变量，其值为15执行以下语句后，两个便利的值分别是多少？为什么？
假设result是一个float型变量,其值为27.32,value是一个int型变量,其值为15执行以下语句后,两个便利的值分别是多少?为什么? 在执行这条语句的过程中,保存在result中的值被读 ...