文档章节

滚动到顶部后固定在顶部代码

Macro.Bo
 Macro.Bo
发布于 2014/06/03 11:00
字数 152
阅读 566
收藏 8
<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title></title> 
  <link rel="stylesheet" type="text/css" href="css/base.css" media="all" /> 
  <style type="text/css">
    .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
    .header{height:150px;}
    #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
    a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
    </style> 
  <script type="text/javascript">
<!--
function menuFixed(id){
    var obj = document.getElementById(id);
    var _getHeight = obj.offsetTop;
    
    window.onscroll = function(){
        changePos(id,_getHeight);
    }
}
function changePos(id,height){
    var obj = document.getElementById(id);
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(scrollTop < height){
        obj.style.position = 'relative';
    }else{
        obj.style.position = 'fixed';
    }
}

window.onload = function(){
    menuFixed('nav');
}
//-->
</script> 
 </head> 
 <body> 
  <div> 
   <div></div> 
   <div id="nav"> 
    <a href="#">11111</a> 
    <a href="#">22222</a> 
    <a href="#">33333</a> 
    <a href="#">44444</a> 
    <a href="#">55555</a> 
   </div> 
  </div>  
 </body>
</html>


本文转载自:http://www.cnblogs.com/yjzhu/archive/2013/01/18/2866782.html

共有 人打赏支持
Macro.Bo
粉丝 1
博文 20
码字总数 1406
作品 0
南京
高级程序员
转 整屏滚动效果插件 fullpage详解

1、引用文件 [html] view plaincopyprint? <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></scri......

大叔做web前端
2014/04/28
0
1
jQuery全屏滚动插件FullPage.js中文帮助文档API

七牛最近改版了网站,弄成全屏滚动的特效,真的很炫,于是查看其源代码,发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很...

Jack088
2016/08/08
211
0
简单返回顶部代码及注释说明

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 返回顶部 方法二:操作scrooll函数用...

lovethe51cto
2015/08/12
0
0
【Android】商品详情页实现

我告诉自己,要独立,要坚强,要勇敢,要活的漂亮,要让自己永远善良。 现今的市场说O2O模式很火一点都不假,例如电商,各行各业都在做电商。而做电商平台必不可少的是商品详情页,那么如何实...

zrunker
2017/10/25
0
0
《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看 1、《React-Native系列》33、 键盘遮挡问题处理 2、《React-Native系列》42、键盘遮挡问题官方处...

hsbirenjie
2017/02/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
5分钟前
0
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
52分钟前
1
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
1
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
3
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部