滚动时sticky nav
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body onscroll="testSticky()">
<div id="header">
<h3>Hello World</h3>
<p>welcome to coding world</p>
</div>
<ul id="nav">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="content">
<h3>hello sticky nav when scroll the page</h3>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
HTML
#header{
background:#ccc;
padding:10px;
text-align:center;
margin:;
width:100%;
}
#nav{
background:#000;
margin:0px;
list-style:none;
width:100%;
}
#nav li{
display:inline-block;
width:100px;
height:30px;
line-height:30px;
background:orange;
text-align:center;
}
#content{
padding:10px 40px;
width:100%;
}
.sticky{
position:fixed;
top:;
width:100%;
}
CSS
JS
/*
* 在页面滚动过程中，页面Y轴相对位移不断变化，
* 当再滚动一下navigator就要被掩藏的时候，
* 使navigator stick在页面顶部
*/
var nav=document.getElementById("nav");//获取navigator
var navTop=nav.offsetTop;//获取navigator的top值
function testSticky(){
if(window.pageYOffset>=navTop){
nav.classList.add('sticky');
}
else{
nav.classList.remove('sticky');
}
}
JS 分离JS和Html
document.body.onscroll=function(){
testSticky();
}
JQuery实现
/*
* 在页面滚动过程中，页面Y轴相对位移不断变化，
* 当再滚动一下navigator就要被掩藏的时候，
* 使navigator stick在页面顶部
*/
$(function(){
$(window).scroll(function(){
if(window.pageYOffset>=($('#nav').offset().top)){
$('#nav').addClass('sticky');
}
else{
$('#nav').removeClass('sticky');
}
});
});
滚动时sticky nav的更多相关文章
- Javascript实现页面滚动时导航智能定位
遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- (原创)RecyclerView结合xUtils2.6实现滚动时不加载item,xUtils2.6的源码分析与改造
我们知道xUtils中的bitmapUtils与listview相配合可以实现滚动时暂停加载 只需要一句话: listview.addOnScrollListener(new PauseOnScrol ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- listview滚动时背景闪烁，背景黑或白问题解决
android在使用listview时出现滚动时背景闪烁,变成背景黑或白的问题这样处理: 1:在布局文件中listview标签中加入: android:cacheColorHint="#00 ...
- EasyUI 1.4.4 DataGrid(大数据量) bufferview滚动时不加载下一页数据解决方案
在使用Easyui DataGrid 过程中,发现若单页数据量超过300,IE浏览器加载速度很慢.也通过网上找寻了很多解决方案,最典型的就是去掉datagrid的自动列宽以及自动行高判断. 1.解决自 ...
- universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...
- UITableView 滚动时隐藏键盘
#pragma mark - UItableView滚动时收键盘 - (void)scrollViewWillBeginDragging:(UITableView *)scrollView { [se ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
随机推荐
- RabbitMQ环境搭建教程收集（待实践）
先收集,后续再实践. http://blog.csdn.net/zyz511919766/article/details/41896823 http://blog.chinaunix.net/uid- ...
- 关于android中的单位（dp、sp）
android让人头疼的适配问题. --------- Android 中的单位大概有这些: 经常使用的dip.sp.有时候用到px. --------- 介绍两个类: TypedValue:有一些单 ...
- iOS社交分享Twitter、Facebook、拷贝到剪切板、LINE、及邮件
准备 首先要引进例如以下三个framework: MessageUI.framework Social.framework Accounts.framework 并在实现这几个方法的地方引入下面几个头 ...
- iOS8使用TouchID
iOS8新增了LocalAuthentication框架,用于TouchID的授权使用.亲測,眼下须要用户的设备支持指纹识别并已设置锁屏,并且实际測试过程中反馈比較慢.不能直接跟第三方账号passwo ...
- KLT 光流
一 光流 光流的概念是Gibson在1950年首先提出来的.它是空间运动物体在观察成像平面上的像素运动的瞬时速度,是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存在 ...
- 【LeetCode刷题Java版】Reverse Words in a String
Given an input string, reverse the string word by word. For example, Given s = "the sky is blue ...
- solr入门之solr的拼写检查功能的应用级别尝试
今天主要是收集了些拼写检查方面的资料和 尝试使用一下拼写检查的功能--=遇到了不少问题 拼写检查的四种配置眼下我仅仅算是成功了半个吧 --------------------------------- ...
- 淘宝数据库OceanBase SQL编译器部分 源代码阅读--生成物理查询计划
SQL编译解析三部曲分为:构建语法树,制定逻辑计划,生成物理运行计划. 前两个步骤请參见我的博客<<淘宝数据库OceanBase SQL编译器部分 源代码阅读--解析SQL语法树>& ...
- Codeforces Round #324 (Div. 2)D. Dima and Lisa 数学（素数）
D. Dima and Lisa Dima loves representing an odd num ...
- Linux服务器 /var/spool/clientmqueue 目录下产生大量文件的删除办法
检查linux发现server中的磁盘分区空间超过98%,登录到服务器查看 [root@localhost etc]# df -hFilesystem 容量 已用 可用 已用% 挂载点/dev/hda ...