js实现导航固定定位
js实现导航固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容滚动事件</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
}
.header{
height: 130px;
background: red;
font: 700 28px/130px serif;
color: aqua;
text-align: center;
}
.nav{
height: 60px;
width: 100%;
background: green;
font: 700 24px/60px serif;
color: rgb(240, 240, 14);
text-align: center;
}
ul{
display: inline-block;
}
li{
float: left;
margin-left: 60px; }
.content1,
.content2,
.content3 {
height: 500px;
background: #DFFCB5;
font: 400 60px/800px serif;
color: #52524E;
text-align: center;
}
.content2 {
background: #FFE1B6;
}
.content3 {
background: #CDE3EB;
}
.fixed {
position: fixed;
top: 0;
left: 0;
} </style>
</head>
<body>
<div class="header" id="header">
顶部广告栏
</div>
<div class="nav" id="nav">
<ul>
<li>主页</li>
<li>商城</li>
<li>产品展示</li>
<li>服务</li>
<li>关于我们</li>
</ul>
</div>
<div class="content1" id="con">
内容1
</div>
<div class="content2">
内容2
</div>
<div class="content3">
内容3
</div>
</body>
</html>
<script>
var header = document.getElementById('header');
var nav = document.getElementById('nav');
var content = document.getElementById('con'); // 封装一个scrollTop兼容性函数
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
} // 给页面注册滚动事件
window.onscroll = function() {
// 判断广告栏header 与 滚动的scrollTop的值
// 当scrollTop > header高度的时候 让导航栏 nav 固定定位
var scrollTop = getScrollTop();
if (scrollTop >= header.offsetHeight) {
// 样式中有的类名这里一定不要忘了加上去,否则就会被替换掉
nav.className = "nav fixed";
// 一旦标题栏设置了固定定位之后,就脱离标准流了,下面的内容就会顶上来,
// 所以要手动给下面的内容添加一个margin-top,将导航栏的位置留下来
content.style.marginTop = nav.offsetHeight + "px";
} else {
// 当scrollTop < header高度的时候 让导航栏 nav 恢复到原来的位置
// nav 取消固定定位,恢复到原来的位置,所以下面内容的margin-top也要去掉
nav.className = "nav"; // 去掉固定定位的样式,保留之前的样式
content.style.marginTop = 0;
}
}; </script>
js实现导航固定定位的更多相关文章
- pc端监听屏幕实现导航固定定位
要点:占位符 js,监听屏幕滚动事件,当滚动条距离浏览器顶部的距离 大于 要固定定位开始以下元素的距离,则给要固定元素添加fixed样式. 初始化方法时,要给占位符添加样式 function sort ...
- js 设置导航固定
<div id="nav"> .... </div> function Add_Data() { var top = $("#header-nav ...
- 滚动条大于120px时,判断pc端的情况下,导航条固定定位
//滚动条大于120px时,判断pc端的情况下,导航条固定定位 $(window).scroll(function(){ var viewWidth=$(document).width() var ...
- Bootstrap 固定定位(Affix)
来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...
- 固定定位 z-index iconfont的使用 043
固定定位 现象 脱标 提升层级 将盒子固定住 参考点 浏览器的左上角 : <!DOCTYPE html> <html lang="en"> <he ...
- jquery的固定定位效果
今天做了个固定定位的效果.比如对导航需要进行固定定位效果: 当没有滚动到导航下面,导航正常显示. 当滚动到导航下面,导航就固定到顶部. 这个效果使用了jquery的方法实现,具体思路为: 1)首先获取 ...
- jQuery实现页面导航内容定位效果,并支持内容切换
需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...
- 实现 DIV 固定定位在网页主体部分最右侧
position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...
- jquery 导航固定的一个实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- CodeForcesGym 100641D Generalized Roman Numerals
Generalized Roman Numerals Time Limit: 5000ms Memory Limit: 262144KB This problem will be judged on ...
- C/C++ 获取文件夹下的所有文件列表
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51009608 提供一段C/C++代码示 ...
- nodejs-函数
使用表达式定义的函数要提到使用之前,要不然无法解析,自然的function xx(xx)不用,ECMAscript自动提前 with关键字 引入空间命令空间,然后可以直接使用里面的对象了 label标 ...
- HDU 4365
把涂色的格子按对称旋转至左上角. 当未涂色时,若要符合要求,则必须要求每一圈矩形都是上下左右对称的.注意是一圈的小矩形.对于N*N的阵,若最外层一圈的小矩形要符合要求,则(假设N%2==0)可以涂色的 ...
- hdoj 5092 Seam Carving 【树塔DP变形 + 路径输出】 【简单题】
Seam Carving Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Tot ...
- Gradle:Gradle入门
一.安装Gradle 1.首先确保你安装的JDK1.5或以上版本号. C:\Users\chengxiang.peng.QUNARSERVERS>java -version java ver ...
- Spring经常使用属性的注入及属性编辑器
对于对象的注入,我们使用ref方式,能够指定注入的对象.以下看下对于基本类型的注入.以及当spring无法转换基本类型进行注入时,怎样编写一个相似转换器的东西来完毕注入. 一.基本类型的注入 以下写一 ...
- poj1286 Necklace of Beads【裸polya】
非常裸的polya,只是我看polya看了非常久 吉大ACM模板里面也有 #include <cstdio> #include <cmath> #include <ios ...
- iOS 判断是否有权限访问相机,相册
1.判断用户是否有权限访问相册 #import <AssetsLibrary/AssetsLibrary.h> ALAuthorizationStatus author =[ALAsset ...
- NEU 1009 Happiness Hotel
1009: Happiness Hotel 时间限制: 1 Sec 内存限制: 128 MB提交: 173 解决: 19[提交][状态][讨论版] 题目描述 The life of Little ...