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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
Js经典案例的实例代码
May 10 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
js实现跟随鼠标移动的小球
Aug 26 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中通过curl检测页面是否被百度收录
2013/09/27 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python Logging 日志记录入门学习
2018/06/02 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python中使用while循环的实例
2019/08/05 Python
python判断正负数方式
2020/06/03 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
ASP.NET中的身份验证有那些
2012/07/13 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
优秀部门获奖感言
2014/02/14 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS