常用组件之侧栏菜单滑动及返回顶部效果
来源:互联网 发布:手写文字图片制作软件 编辑:程序博客网 时间:2024/05/20 10:11
侧栏菜单
当点击文章模板时,侧栏从右侧平缓划出并且遮罩层使整个页面变暗。
选择侧栏触发器 $('#sidebar_trigger')
,对其添加监听点击事件 showSideBar()
,使遮罩层$('.mask')
和$('#sidebar')
都显示出来。
然后再对遮罩层$('.mask')
监听一个点击事件hideSideBar
,使遮罩层$('.mask')
和$('#sidebar')
隐藏。
返回顶部
同样,对$('.to-back-top')
监听点击事件,写函数体第一步可先console.log()
打印测试。其函数体中选中$('html,body')
,向animate()
中传入一个对象,使滚动条进行滚动到位置0.
另外,再监听window的scroll点击事件,即在鼠标滚动的过程中判断已滚动部分的高度值和窗口高度值的大小。如果已滚动的部分高于窗口的高度,显示返回按钮;否则,隐藏返回按钮。由于该事件是在滚动过程中才会被监测,所以重新刷新页面时,返回顶部按钮是显示着的。
此时需要对window触发scroll事件。$(window).trigger('scroll');
;$(function(){ 'use strict'; var sidebar=$('#sidebar'),//选择侧栏 mask=$('.mask'), sidebar_trigger=$('#sidebar_trigger'), backButton=$('.to-back-top'); function showSideBar(){ // console.log('clicked'); mask.fadeIn(); sidebar.css('right',0); // sidebar.css('transform','translate(0,0)'); } function hideSideBar(){ mask.fadeOut(); sidebar.css('right',-sidebar.width());//width() // sidebar.css('transform','translate('+'sidebar.width()'+'px'+',0)'); } // sidebar_trigger.on('click',showSideBar()); sidebar_trigger.on('click',showSideBar); mask.on('click',hideSideBar); backButton.on('click',function(){ // console.log('back back'); $('html,body').animate({ scrollTop:0 },800); }); $(window).on('scroll',function(){ if($(window).scrollTop() > $(window).height()) backButton.fadeIn(); else backButton.fadeOut(); }) $(window).trigger('scroll');})
阅读全文
0 0
- 常用组件之侧栏菜单滑动及返回顶部效果
- 顶部横向滑动菜单效果
- Android 简单实现顶部滑动菜单效果
- “返回顶部代码”滑动效果 jQuery超级简单实用写法
- 回到顶部滑动效果
- jquery菜单滑动及显示隐藏效果
- 返回顶部效果
- javascript返回顶部效果
- jQuery返回顶部效果
- HTML5 返回顶部 效果
- jQuery返回顶部效果
- 返回顶部效果
- 网站返回顶部效果
- 返回顶部效果!
- 简单的顶部滑动菜单
- Android 仿美团顶部滑动菜单
- javascript回到顶部滑动效果及点击导航滑动到相应热点的效果
- jquery 滑动到顶部效果
- 机器学习实战-KNN
- C++ get知识 ——每天学习一点点
- 第三方开源库:ListView相关:滑动删除
- k20+caffe+cuda 7.5+cudnn v5+python
- JM8.6之get_block() 1/4亮度像素内插详述
- 常用组件之侧栏菜单滑动及返回顶部效果
- javaweb学习总结——使用JDBC处理MySQL大数据
- Hibernate的配置
- Maven入门1
- JAVA WEB基础- DBUtils
- Run script only when installing勾选后 未知的Crash问题
- 网络爬虫-网页源码的gzip压缩和解压
- typedef详细
- 蓝牙核心技术概述(二):蓝牙使用场景