打赏银两×

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

支付宝支付

微信支付

QQ钱包

支付二维码

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

学习笔记马富天 2016-05-19 14:53:06 579 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>
```

版权归马富天PHP博客所有

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

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

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

顶5

踩3

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

分享到：

所有评论

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

520才发文章吗？

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

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

1. Eclipse中...No java virtual machine was found...解决方法（9036）

2. 数据库SQL语句查询指定时间段内的数据（4249）

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

4. input输入框绑定回车事件两种方式（3126）

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

6. jQuery中效果animate方法解决width是百分比出现的问题（1534）

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

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

9. 解决 cmd 窗口 php 输出中文乱码问题（1039）

10. CSS修改默认的input标签中file（文件上传）样式（940）

1. PHP快速入门（18）

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

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

4. PHP下最好用的富文本HTML过滤器：HTMLPurifier使用教程（3）

5. 如何设置域名邮箱（3）

6. CSS outline 属性介绍（3）

7. PHP 模拟登录（3）

8. php实现pjax无刷新加载页面实例（3）

9. 【面试题】加号和连接符.的优先级比较（3）

10. 如何使用Eclipse安装SVN插件（3）