［HTML/CSS］布局学习笔记－侧边栏的弹出，回到顶部

来源：互联网发布：冰箱什么牌子好知乎编辑：程序博客网时间：2024/05/16 12:00

跟着imooc学习

Step1：

绘制侧边栏sidebar的样式与mask，采用 css position：fixed 相对于浏览器窗口进行定位，设置遮罩的背景颜色的rgba(0,0,0,0.X)

sidebar与mask放在html页面底部，其中，mask放在sidebar之前，跟触发事件顺序有关

Step2:

设置将side－trigger标签绑定点击事件；

    //触发侧边栏展示    sidebar_trigger.on('click',sidebarShow);

Step3：

设置mask遮罩层的点击事件；

    //触发侧边栏隐藏    mask.on('click',sidebarHidden);

Step4：

编写会到顶部标签，用fixed定位；

Step5:

编写会到顶部标签绑定的点击事件：

Step5:

检测window对象scroll top与height，优化会到顶部标签的出现

效果图片

相关代码

<!-- #sidebar>ul>(li>a{item$})*5 --><div id="mask"><!-- 遮罩层 --></div><div id="sidebar"><!-- 侧边菜单 --><ul><li><a href="#">item1</a></li><li><a href="#">item2</a></li><li><a href="#">item3</a></li><li><a href="#">item4</a></li><li><a href="#">item5</a></li></ul></div><!-- 侧边菜单结束 --><div id="back-to-top">回到顶部</div></body><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">console.log("hello");var sidebar =$('#sidebar'),mask=$('#mask'),sidebar_trigger=$("#sidebar_trigger"),backBtn=$("#back-to-top");// 侧栏菜单的展示function sidebarShow(){mask.fadeIn();sidebar.css('right','0px');}     // 侧栏菜单的隐藏function sidebarHidden(){mask.fadeOut();sidebar.css('right',-sidebar.width());}//触发侧边栏展示sidebar_trigger.on('click',sidebarShow);//触发侧边栏隐藏mask.on('click',sidebarHidden);//触发返回顶部事件backBtn.on('click',function(){$('html,body').animate({scrollTop:0},800);});    $(window).scroll(function(){    if($(window).scrollTop()>$(window).height())    {    backBtn.fadeIn();    }    else{    backBtn.fadeOut();        }        });

源码

https://github.com/lulufeng/Blog

0 0