学习笔记（仿淘宝返回顶部侧边栏）

最新推荐文章于 2022-03-08 00:00:38 发布

MaMin_

最新推荐文章于 2022-03-08 00:00:38 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/MaMin_/article/details/108922455

版权

页面滚动到banner区域时，侧边“返回顶部”栏的位置变为固定；
页面滚动到 main 区域时，侧边“返回顶部”栏里的字显示出来；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.w {
				width: 1000px;
				margin: auto;
			}
			
			.slider-bar {
				position: absolute;
				left: 50%;
				top: 300px;
				margin-left: 500px;
				width: 30px;
				height: 85px;
				background-color: #CCCCCC;
			}
			
			.header {
				height: 150px;
				background-color: #5F9EA0;
				margin-bottom: 10px;
			}
			
			.banner {
				height: 350px;
				background-color: #6495ED;
				margin-bottom: 10px;
			}
			
			.main {
				height: 700px;
				background-color: #999999;
			}
			span {
				display: none;
				position: absolute;
			}
		</style>
	</head>
	
	<body>
		<div class="slider-bar">
			<span class="goBack">返回顶部</span>
		</div>
		<div class="header w">头部区域</div>
		<div class="banner w">banner区域</div>
		<div class="main w">主体部分</div>
	</body>
	<script>
		var sliderbar = document.querySelector('.slider-bar');
		var banner = document.querySelector('.banner');
		var main = document.querySelector('.main');
		var bannerTop = banner.offsetTop;
		var sliderbarTop = sliderbar.offsetTop - bannerTop;
		var goBack = document.querySelector('.goBack');
		var mainTop = main.offsetTop;
		document.addEventListener('scroll',function() {
			if(window.pageYOffset >= bannerTop){
				sliderbar.style.position = 'fixed';
				sliderbar.style.top = sliderbarTop + 'px';
			}else {
				sliderbar.style.position = 'absolute';
				sliderbar.style.top = 300 + 'px';
			}
			
			if(window.pageYOffset >= mainTop){
				goBack.style.display = 'block';
			}else {
				goBack.style.display = 'none';
			}
		})
	</script>
</html>

MaMin_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（仿淘宝返回顶部侧边栏）

页面滚动到banner区域时，侧边“返回顶部”栏的位置变为固定；页面滚动到 main 区域时，侧边“返回顶部”栏里的字显示出来；<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .w { width: 1000px; margin: auto; } .slider
复制链接

扫一扫