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的值在相应的增加，并且把这个增加的值传给侧边栏距离顶部的值，这也就出现了划到中间区域，侧边栏相对静止的情况。如果没有滑倒中间区域，那么侧边栏的位置还是默认的位置。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • javascript实现动态侧边栏代码

    javascript实现动态侧边栏代码

    总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 复制代码 代码如下: <body><div id="div1"><span>侧边栏</span></div></body> 然后是css的样式: 复制代码 代码如下: #div1{    width:150px;    height:200px;    background:#999

  • 利用js编写响应式侧边栏

    为了练手,自己学敲网站时刚好碰到需要制作侧边栏,在网上也查了各种插件以及框架都可以实现这个功能,但是想自己学着用js原生学一个试试,于是就初略完成了侧边栏的实现,可以让初学者参考参考,代码能力有限. 其中主要设计的就是animate()函数,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如

  • JS实现京东商品分类侧边栏

    JS实现京东商品分类侧边栏

    本文实例为大家分享了JS实现京东商品分类侧边栏的具体代码,供大家参考,具体内容如下 HTML代码部分 <div> <img src="/1.png" alt=""> </div> <ul> <li><a href="">京东秒杀</a></li> <li class="two"><a href="&quo

  • JS实现侧边栏鼠标经过弹出框+缓冲效果

    可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框. 首先,我们用两个div来简单布局以下页面: <div id="box"> <div id="share">分享到</div> </div> 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,然后把外层div定位到屏幕左外测,left的值与宽度相等,刚好隐藏掉就可以.当鼠标经过时,再通过改变left的值使外层div显示出来. <

  • JS实现页面侧边栏效果探究

    JS实现页面侧边栏效果探究

    其实效果大概是这样的: 而标题,也许是我当时看到这种效果时的真实感受.因为第一反应是:"还可以把page整体移出页面?" 发现:display动画的应用 整件事的起因是什么呢?在笔者最近为社团计划的官网上打算做一个这样的效果:点击头像,左边/右边滑出一个"面板",里面展示用户的个人信息. 当然,这有很多种做法,比如:利用position定位+overflow溢出隐藏.利用opacity/visibility隐藏+pointer-events元素穿透- 但是笔者当时想

  • JavaScript实现简单的隐藏式侧边栏功能示例

    JavaScript实现简单的隐藏式侧边栏功能示例

    本文实例讲述了JavaScript实现简单的隐藏式侧边栏功能.分享给大家供大家参考,具体如下: 常见的隐藏式侧边栏,如分享.联系客服等.通过设置速度来实现滑入滑出的动态效果 以下是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net js侧边栏</title> <style type="text/c

  • javascript 实现动态侧边栏实例详解

    javascript 实现动态侧边栏实例详解

    javascript 实现动态侧边栏 总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 <body> <div id="div1"> <span>侧边栏</span> </div> </body> 然后是css的样式: #div1{ width:150px; height:200px; background:#999999; pos

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • 基于slideout.js实现移动端侧边栏滑动特效

    基于slideout.js实现移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢 先看下运行效果: 一.准备资料 只需要准备slideout.js库即可: https://github.com/Mango/slideout/blob/master/dist/slideout.js 小图标: 二.实现代码 HTML代码: <!doctype html> <html lang

  • JavaScript中实现无缝滚动、分享到侧边栏实例代码

    废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍js无缝滚动实例代码: 代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • js+css实现全屏侧边栏

    js+css实现全屏侧边栏

    本文实例为大家分享了js实现全屏侧边栏的具体代码,供大家参考,具体内容如下 在浏览网站时我们经常会看到一个菜单按钮,点一下就会出现一栏侧边导航栏,直接上代码! HTML部分 <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×&

随机推荐