怎么新建MySQL数据库
阅读：683
我们在浏览网站时，经常会看到网站页面的侧边栏随着网站页面滑动而滚动，当滑动到banner部分，侧边栏就不在固定不动，而且还会有放回顶部的提示，那么这是如何实现呢？侧边栏也是前端开发比较经常遇到的需求，这篇文章就介绍如何用javascript实现一个简单固定侧边栏。
**代码如下**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cm{
position: absolute;
top: 300px;
margin-left: 1150px;
width: 60px;
height: 130px;
background-color: pink;
}
.w{
margin: 10px auto;
width: 80%;
}
.head{
height: 200px;
background-color: blue;
}
.banner{
height: 400px;
background-color: green;
}
.main{
height: 1000px;
background-color: hotpink;
}
span {
display: none;
/*position: absolute;
bottom: 0;*/
}
</style>
</head>
<body>
<div class="cm">
<span class="backTop">返回顶部</span>
</div>
<div class="head w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体区域</div>
<script>
var cm=document.querySelector('.cm')
var banner=document.querySelector('.banner')
/*console.log(banner.offsetTop)*/
//被卷曲头部的大小位置,写在外面
var bannertop=banner.offsetTop
var cmtop=cm.offsetTop-bannertop
var main=document.querySelector('.main')
var goback=document.querySelector('.backTop')
var maintop=main.offsetTop
document.addEventListener('scroll',function () {
//页面被卷去的头部
/*console.log(window.pageYOffset)*/
//当卷曲头部大于214，侧边栏改为固定
if (window.pageYOffset>bannertop){
cm.style.position='fixed'
cm.style.top=cmtop+'px'
}else {
cm.style.position='absolute'
cm.style.top='300px'
}
if (window.pageYOffset>maintop){
goback.style.display='block'
}else {
goback.style.display='none'
}
})
</script>
</body>
</html>
演示效果
代码解释
这里用到了document的添加事件scroll，浏览器滚动事件，当滚动时，触发函数。
这里设置了一个变量为bannerTop，是中间那个绿色模块顶部距离页面最上方的距离，然后定义cmtop这个变量，cm为侧边栏到顶部的距离，cmtop=bannerTop-cm.offsetTop。然后判断页面卷曲的长度是否大于中间那个模块距离顶部的距离，意思的页面是否划到中间这个模块，如果划到了中间这个模块，那么让侧边栏的位置固定，然后侧边栏距离顶部的距离相应改变，这里这个情况因为侧边栏与中间拿块是相对静止，所以，未卷到中间区域时，cmtop的值是恒定不变的，当卷到中间区域时，banner。Top的值变为负值，所以cmtop的值在相应的增加，并且把这个增加的值传给侧边栏距离顶部的值，这也就出现了划到中间区域，侧边栏相对静止的情况。如果没有滑倒中间区域，那么侧边栏的位置还是默认的位置。
然后如果划到了最后一个区域则出现‘回到顶部'这四个字在侧边栏上。
以上就是一个简易的javascript侧边栏实例，希望对大家了解固定侧边栏的实现有所帮助。更多JavaScript内容可以关注其他文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理