原生JS制作网站吸顶条

最新推荐文章于 2024-06-04 13:02:57 发布

alexbai!

最新推荐文章于 2024-06-04 13:02:57 发布

阅读量224

点赞数 1

分类专栏： js 文章标签：原生js js 吸顶条网页固定定位

本文链接：https://blog.csdn.net/cp3___/article/details/89370912

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天写一个关于网站中吸顶条的思路

1、吸顶条就是在网页移动到一定距离的时候，让某个内容，固定显示在一个位置

2、获取网页中滚动条的滚动距离

3、判断要显示的内容在滚动条，滚动到一定距离后，让他显示

下面是代码部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#content{
			width: 100%;
			height: 50px;
			background: red;
		}
		.father{
			position: fixed;
			top:0;
			left: 0;
		}
	</style>
</head>
<body style="height: 3000px;">
	<p>kdsjfkljsdklfjd</p>
	<p>kdsjfkljsdklfjd</p>
	<p>kdsjfkljsdklfjd</p>
	<p>kdsjfkljsdklfjd</p>
	<p>kdsjfkljsdklfjd</p>
	<p>kdsjfkljsdklfjd</p>
	<div id="content"></div>
</body>
<script>
//绑定滚动条移动事件
window.onscroll = function(){
	var bb = document.body.scrollTop || document.documentElement.scrollTop;//解决浏览器兼容问题
	if(bb >500){
            //小与500的时候，让它添加这个类
		content.className = "father"
	}else{
            //否则就是空
		content.className = "";
	}
}
</script>
</html>

alexbai!

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS制作网站吸顶条

今天写一个关于网站中吸顶条的思路 1、吸顶条就是在网页移动到一定距离的时候，让某个内容，固定显示在一个位置 2、获取网页中滚动条的滚动距离 3、判断要显示的内容在滚动条，滚动到一定距离后，让他显示下面是代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
复制链接

扫一扫

专栏目录