JavaScript实现上下滑动的侧边栏

最新推荐文章于 2024-02-20 16:19:55 发布

Simble_ming

最新推荐文章于 2024-02-20 16:19:55 发布

阅读量1.2k

点赞数

文章标签：侧边导航栏 js

本文链接：https://blog.csdn.net/qq_36526512/article/details/80903177

版权

这个是在很多网站中侧边导航栏有的功能，比如那种很招人烦的咨询广告，下面是一个简化版：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				height: 2000px;
			}
			div{
	         	width:100px;
	         	height:100px;
	         	background-color:red;
	         	position:absolute;/*必须为绝对定位*/
	         	right:0;
	      	}
		</style>
	</head>
	<body>
		<script>
			//document.documentElement.clientHeight获取当前页面高度
         	        //offsetHeight 获取当前元素的高度，包括边框和填充，但不是边距
         	        //offsetTop获取当前元素距离页面顶部的距离
			window.οnscrοll=function(){
				var oDiv = document.getElementById('div');
                        //document.documentElement.scrollTop兼容ie浏览器       
                        //document.body.scrollTop兼容谷歌浏览器
                        //上面两个的功能都是一样的，获取滚动条顶部相对于当前页面的顶部位置距离整个页面顶部的距离

最低0.47元/天解锁文章

Simble_ming

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现上下滑动的侧边栏

这个是在很多网站中侧边导航栏有的功能，比如那种很招人烦的咨询广告，下面是一个简化版：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body{ height: 2
复制链接

扫一扫