javascript实现固定侧边栏


Posted in Javascript onFebruary 09, 2021

用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>

演示效果

javascript实现固定侧边栏

代码解释

这里用到了document的添加事件scroll,浏览器滚动事件,当滚动时,触发函数。

这里设置了一个变量为bannerTop,是中间那个绿色模块顶部距离页面最上方的距离,然后定义cmtop这个变量,cm为侧边栏到顶部的距离,cmtop=bannerTop-cm.offsetTop。然后判断页面卷曲的长度是否大于中间那个模块距离顶部的距离,意思的页面是否划到中间这个模块,如果划到了中间这个模块,那么让侧边栏的位置固定,然后侧边栏距离顶部的距离相应改变,这里这个情况因为侧边栏与中间拿块是相对静止,所以,未卷到中间区域时,cmtop的值是恒定不变的,当卷到中间区域时,banner。Top的值变为负值,所以cmtop的值在相应的增加,并且把这个增加的值传给侧边栏距离顶部的值,这也就出现了划到中间区域,侧边栏相对静止的情况。如果没有滑倒中间区域,那么侧边栏的位置还是默认的位置。

然后如果划到了最后一个区域则出现‘回到顶部'这四个字在侧边栏上。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
JavaScript实现前端倒计时效果
Feb 09 #Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 #Javascript
详解Vue的七种传值方式
Feb 08 #Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 #Javascript
js 执行上下文和作用域的相关总结
Feb 08 #Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 #Javascript
You might like
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
浅析return false的正确使用
2013/11/04 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python列表操作实例
2015/01/14 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
django实现用户注册实例讲解
2019/10/30 Python
Python类反射机制使用实例解析
2019/12/30 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
2014国培学习感言
2014/03/05 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript