JavaScript学习笔记—仿淘宝固定侧边栏
分析：
- 原先侧边栏是绝对定位
- 当页面滚动到一定位置，侧边栏改为固定定位
- 页面继续滚动，会让返回顶部显示出来
因此
1.需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document
2.滚动到某个位置，就是判断页面被卷上去的值
3.页面被卷去的头部：可通过window.pageYOffset获得（ 左侧：window.pageXOffset）
4.注意：元素被卷去的头部是element.scrollTop
代码如下：
<html>
<meta charset="utf-8">
<head>
<style type="css">
.silder-bar{
position:absolute;
left:50%;
/*这里！不是很明白为什么这样设置。这个50%是相对什么的？（应该是body）暂时能想到的解决办法是先写个不确定的位置，之后再通过f12来调整*/
top:300px;
margin-left:600px;
width:45px;
height:130px;
background-color:pink;
}
.w{
width: 1200px;
margin: 10px auto;
}
.hearder{
height: 150px;
background-color: purple;
}
.banner{
height:250px;
background-color:skyblue;
}
.main{
height:1000px;
background-color:yellowgreen;
}
span{
display:none;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div class="slider-bar">
<span>返回顶部</span>
</div>
<div class="hearder w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主题部分</div>
<script type="text/javascript">
// 1.获取元素
var banner=document.quertSelector('.banner');
var sliderbar=document.querySelector('slider-bar');
var bannerTop=banner.offSetTop; //一定要写到滚动的外面
var silderbarTop=sliderbar.offsetTop-bannerTop;//这里①！
var main=document.querySelector('..main');
var goBack=document.querySelector('.goBack');
var mainTop=main.offSetTop;
// 2.页面滚动事件srcoll
document.addEventLisener('scroll',function(){
if(window.pageYOffset>bannerTop){
silderbar.style.position='fixed';
sliderbar.style.top=sliderbarTop+'px';//这里①!!!侧边栏就不会跳了！
}
else{
sliderbar.style.position='absolute';
sliderbar.style.top=300+'px';
}
// 4.当我们页面滚动到main盒子，就显示 goback模块
if(window.pageYOffset>=mainTop){
goBack.display='block';
}else{
goBack.display='none';
}
})
</script>
</body>
</html>
- Learning from pink老师
1942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
