常用组件之侧栏菜单滑动及返回顶部效果

最新推荐文章于 2020-03-12 22:18:09 发布

xuexueq

最新推荐文章于 2020-03-12 22:18:09 发布

阅读量768

点赞数

分类专栏： js相关

本文链接：https://blog.csdn.net/xuexueq/article/details/73649855

版权

js相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

侧栏菜单
当点击文章模板时，侧栏从右侧平缓划出并且遮罩层使整个页面变暗。

选择侧栏触发器 $('#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');

})