打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

支付二维码

使用原生JS实现页面下滑时，DIV保留在顶部位置

学习笔记马富天 2016-05-19 14:53:06 123 1

【摘要】使用原生js实现了当页面滚动条下拉的时候，导航栏保持在顶部，当滚动条向上拉的时候，导航栏回到原来的位置。

花了两三个小时，总算是把基本代码理清了，下面是效果图和完整代码。

请输入图片名称

完整代码如下：

```
<!DOCTYPE HTML>
```
```
<html lang="en-US">
```
```
	<head>
```
```
	    <meta charset="UTF-8">
```

	    <title>使用原生JS实现页面下滑时，DIV保留在顶部位置</title>

```
	    <style type="text/css">
```
```
	    	*{
```
```
	    		margin:0;
```
```
	    		padding:0;
```
```
	    		font-size:12px;
```
```
	    	}
```
```
	    	body{
```
```
	    		height:2000px;
```
```
	    	}
```
```
		    .top{
```
```
		    	height:150px;
```
```
		    }
```
```
		    .nav{
```
```
		    	line-height:30px;
```
```
		    	top:0;
```
```
		    	background:#D8450B;
```
```
		    	width:80%;
```
```
		    	margin:0 auto;
```
```
		    	left:0;
```
```
		    	border-radius:4px;
```
```
		    }
```
```
		    a{
```
```
		    	display:inline-block;
```
```
		    	margin:0 20px;
```
```
		    	color:white;
```
```
		    	text-decoration:none;
```
```
		    }
```
```
	    </style>
```
```
	</head>
```
```
	<body>
```
```
        <div class="top"></div>
```
```
        <div id="nav" class="nav">
```
```
            <a href="#">首页</a>
```
```
            <a href="#">博客</a>
```
```
            <a href="#">论坛</a>
```
```
            <a href="#">留言</a>
```
```
            <a href="#">关于</a>
```
```
        </div>   
```
```
		<script type="text/javascript">
```
```
			menuFixed('nav');
```
```
			function menuFixed(id){
```

			    var obj = document.getElementById('nav');

```
			    var height = obj.offsetTop;
```
```
			    window.onscroll = function(){
```

				    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

```
				    if(scrollTop <= height){
```

				        obj.style.position = 'static';

```
				        obj.style.left = 0;
```
```
				    }else{
```

				        obj.style.position = 'fixed';

```
				        obj.style.left = '10%';
```
```
				    }
```
```
			    }
```
```
			}
```
```
		</script>        
```
```
	</body>		
```
```
</html>
```

版权归马富天个人博客所有

本文标题：《使用原生JS实现页面下滑时，DIV保留在顶部位置》

本文链接地址：http://www.mafutian.com/120.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶7

踩3

上一篇《 jQuery实现选项卡》下一篇《说说CDN加速服务器——内容分发网络》

所有评论

第 1 楼 虫虫学车 2016-05-19 16:18:45 广东深圳

520才发文章吗？

首页
上一页
1
下一页
尾页
第1页
每页12条
共1页
共1条

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

1. 安全扫描工具 AWVS 8.0,AWVS 9.x,AWVS 10.5,AWVS 11 破解版下载（7444）

2. 微信分享第三方网站链接时显示缩略图和描述的方法（6470）

3. 四大常用知名的uci数据集简介（3018）

4. 该网页无法正常运作,ERR_BLOCKED_BY_XSS_AUDITOR,关闭 Google 浏览器的 xss 过滤机制的方法（2299）

5. PHP 处理图片时报错：Warning: imagecreatefromjpeg(): gd-jpeg: JPEG library reports unrecoverable error（1886）

6. Eclipse中...No java virtual machine was found...解决方法（1881）

7. 使用 ctrl c 中断 python 程序时如何做到优雅的退出（1851）

8. 【宅男福利】如何通过番号看电影（1736）

9. Microsoft OLE DB Provider for ODBC Drivers 错误 '80004005' 解决办法（1715）

10. sublime text 3 关闭弹出的更新版本提示 Update Available / a new version of Sublime Text is available, download now?（1625）

1. PHP快速入门（20）

2. 微信分享第三方网站链接时显示缩略图和描述的方法（9）

3. JavaScript中alert()方法重写（6）

4. 二分查找算法的时间复杂度计算（logN）（5）

5. Apache 2.4.9 开启 Gzip 压缩服务，并解决开启后 http 304 状态码失效问题（5）

6. 在 Centos 下命令行中使用 PHP 获取服务器 IP 地址（5）

7. Wap 手机端页面 history.go(-1) 返回上一级页面的初始位置，而不是顶部的解决办法（4）

8. CloverFlush.dll 没有被指定在 Windows 上运行，或者它包含错误。（4）

9. MySQL 中 delete 语句中的子查询限制（3）

10. 字符串 "open_door" 转成 "OpenDoor","make_by_id" 转成 "MakeById"（3）