javascript实现固定侧边栏
更新时间：2021年02月09日 10:29:43 作者：爱前端的茂茂
这篇文章主要为大家详细介绍了javascript实现固定侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用javascript实现固定侧边栏，供大家参考，具体内容如下
正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教
我们在逛某某商城的时候，或者某些网站的时候，通常会遇到有个东西叫做侧边栏，这个东西会跟随我们浏览器浏览长度来进行变化1，从而实现相对窗口的固定位置1
**代码如下**
<!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中DOM事件，解决了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用，感兴趣的小伙伴们可以参考一下2015-12-12
想要确定this里规则是什么，其实方法很简单，通过检查它的调用位置，在函数被调用的时候确定this，下面就跟随脚本之家小编一起通过本文学习吧2017-09-09
这篇文章主要介绍了javascript 弹出的窗口返回值给父窗口具体实现，有需要的朋友可以参考一下2013-11-11
这篇文章主要为大家详细介绍了如何简单实现bootstrap选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
微信小程序的商户系统一般是以接口的形式开发的,小程序通过调用与后端约定好的接口进行参数的传递以及数据的接收,下面这篇文章主要给大家介绍了关于微信小程序支付功能(前端)的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了javascript实现匀速动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,下面这篇文章主要给大家介绍了关于JS循环中正确使用async、await的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
本文主要介绍了js实现常见的工具条效果的实例。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了使JavaScript动画流畅的一些方法,包括与CSS动画效果的一些对比,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了微信自定义分享链接信息（标题，图片和内容）实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
最新评论