参考w3c

 <!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的更多相关文章

  1. Javascript实现页面滚动时导航智能定位

    遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...

  2. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  3. (原创)RecyclerView结合xUtils2.6实现滚动时不加载item,xUtils2.6的源码分析与改造

    我们知道xUtils中的bitmapUtils与listview相配合可以实现滚动时暂停加载 只需要一句话: listview.addOnScrollListener(new PauseOnScrol ...

  4. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  5. listview滚动时背景闪烁，背景黑或白问题解决

    android在使用listview时出现滚动时背景闪烁,变成背景黑或白的问题这样处理: 1:在布局文件中listview标签中加入: android:cacheColorHint="#00 ...

  6. EasyUI 1.4.4 DataGrid(大数据量) bufferview滚动时不加载下一页数据解决方案

    在使用Easyui DataGrid 过程中,发现若单页数据量超过300,IE浏览器加载速度很慢.也通过网上找寻了很多解决方案,最典型的就是去掉datagrid的自动列宽以及自动行高判断. 1.解决自 ...

  7. universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法

    在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...

  8. UITableView 滚动时隐藏键盘

    #pragma mark - UItableView滚动时收键盘 - (void)scrollViewWillBeginDragging:(UITableView *)scrollView { [se ...

  9. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

随机推荐

  1. mybatis collection标签和association标签（一对多，一对一）转载

    mybatis 一对一与一对多collection和association的使用   在mybatis如何进行一对一.一对多的多表查询呢?这里用一个简单的例子说明. 一.一对一 1.associati ...

  2. SpringMVC之application-context.xml，了解数据库相关配置

    上一篇SpringMVC之web.xml让我们了解到配置一个web项目的时候,怎样做基础的DispatcherServlet相关配置.作为SpringMVC上手的第一步.而application-co ...

  3. 一个有趣的问题:ls -l显示的内容中total究竟是什么？

    当我们在使用ls -l的命令时,我们会看到例如以下类似的信息. 非常多人可能对于第一行的total 12的数值并非非常在意,可是你是否想过,它到底是什么意思? man中的说明,我们能够看出total的 ...

  4. oracle 11g GRID 中 关于 OLR 须要知道的一些内容

     oracle 11g GRID 中 关于 OLR 须要知道的一些内容 1.检查olr 的状态: [root@vmrac1 ~]# ocrcheck -local Status of Oracle ...

  5. js的调用函数前先执行某语句问题

    js的调用函数前先执行某语句问题 标签: web前端面试 2015-09-29 17:48 1455人阅读 评论(0) 收藏 举报  分类: js(5)  版权声明:本文为博主原创文章,未经博主允许不 ...

  6. JspSmartUpload 实现上传

    2.save  作用:将所有上传文件保存到指定文件夹下,并返回保存的文件个数. 原型:public int save(String destPathName)  和public int save(St ...

  7. manacher hihoCoder1032 最长回文子串

    居然能够做到O(n)的复杂度求最长回文.,也是给跪了. 以下这个人把manacher讲的很好,,能够看看 http://blog.csdn.net/xingyeyongheng/article/det ...

  8. HTTP要点概述：十一，HTTP状态码

    一,状态码: 状态码告知从服务器返回的请求结果.用户借助状态码可以判断服务器是正常处理了请求,还是发生了错误. 状态码比如200 OK,以3位数字和原因短语组成. 数字中的第一位制定了相应的类别,后两 ...

  9. Windows10 Win键失灵的解决方法

    之前在Windows10出来的时候在使用过程中发现:按“Win键”调出开始菜单没有用.一点反应都没有.Win+R等这样的组合键也没用. 后来周年更新后,还是无法使用... 各种方法用尽啊.都不行啊! ...

  10. bzoj2709: [Violet 1]迷宫花园

    二分答案,spfa check就行了. gb题卡精度. #include<cstdio> #include<iostream> #include<cstring> ...