吸顶条

最新推荐文章于 2021-10-25 13:08:02 发布

不爱当码农的瘦子

最新推荐文章于 2021-10-25 13:08:02 发布

阅读量384

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43139889/article/details/83346827

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

唯一要注意的是，当吸顶条吸顶也就是固定(position:fixed)到顶方时，吸顶条标签所占的位置会变成空，导致下面一个标签会替补上去，解救办法就是在吸顶条标签下方加一个弥补的.remedy标签，没有吸顶时remedy的display为none，吸顶时为block来填上去，这样就不会影响下一个p标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>吸顶条</title>
	<style type="text/css">
		.tiao{
			width: 100%;
			height: 40px;
			background:red;
		}
		.remedy{
			display:none;
			width:100%;
			height: 40px;
		}
	</style>
</head>
<body>
	<div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<p>7</p>
		<p>8</p>
		<p>9</p>
		<p>10</p>
		<p>11</p>
		<p>12</p>
		<p>13</p>
		<p>14</p>
		<p>15</p>
		<p>16</p>
		<p>17</p>
		<p>18</p>
		<p>19</p>
		<p>20</p>
		<p>21</p>
		<p>22</p>
		<p>23</p>
		<p>24</p>
		<p>25</p>
		<p>26</p>
		<p>27</p>
		<p>28</p>
		<p>29</p>
		<p>30</p>
		<div class="tiao"></div>
		<div class="remedy"></div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<p>7</p>
		<p>8</p>
		<p>9</p>
		<p>10</p>
		<p>11</p>
		<p>12</p>
		<p>13</p>
		<p>14</p>
		<p>15</p>
		<p>16</p>
		<p>17</p>
		<p>18</p>
		<p>19</p>
		<p>20</p>
		<p>21</p>
		<p>22</p>
		<p>23</p>
		<p>24</p>
		<p>25</p>
		<p>26</p>
		<p>27</p>
		<p>28</p>
		<p>29</p>
		<p>30</p>
	</div>

	<script type="text/javascript">
		var oTiao=document.querySelector('.tiao'),
			remedy=document.querySelector('.remedy');

		var tiaoTop=oTiao.offsetTop;  //获得吸顶标签的高度
		window.onscroll=function(){
		    //获得滚动的距离
			var scrollLength=document.documentElement.scrollTop||document.body.scrollTop;
			//当滚动条滚动到吸顶标签的位置时，标签固定即吸顶
			if(scrollLength>=tiaoTop){
				oTiao.style.cssText='position:fixed;top:0;left:0;width:100%';  //cssText添加css属性
				console.log('1');
				remedy.style.display='block';
				//值得注意的是，当滚动条吸顶时.tiao标签变成了定位，该标签就为空了，使得下一个标签会跳上来，所以可以在.tiao标签下面设置一个display为none的标签，当事件发生时来弥补.tiao标签
			}else{
				remedy.style.display='none';
				console.log('2')
				oTiao.style.cssText='';
			}
		}
	</script>
</body>
</html>

不爱当码农的瘦子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
吸顶条

唯一要注意的是，当吸顶条吸顶也就是固定(position:fixed)到顶方时，吸顶条标签所占的位置会变成空，导致下面一个标签会替补上去，解救办法就是在吸顶条标签下方加一个弥补的.remedy标签，没有吸顶时remedy的display为none，吸顶时为block来填上去，这样就不会影响下一个p标签&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&...
复制链接

扫一扫

专栏目录