JavaScript实现上下滑动的侧边栏

最新推荐文章于 2023-12-23 23:46:51 发布

Simble_ming

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：侧边导航栏 js

本文链接：https://blog.youkuaiyun.com/qq_36526512/article/details/80903177

本文介绍如何使用JavaScript实现一种常见于网站中的交互效果——上下滑动的侧边栏。这种效果常用于侧边导航栏，尤其是那些可隐藏或显示的咨询广告。文章提供了一个简化版的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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.onscroll=function(){
				var oDiv = document.getElementById('div');
                        //document.documentElement.scrollTop兼容ie浏览器