Unsplash
侧边栏的作用应该就不用多说了吧，能够很方便我们回到网页的指定位置，在大屏设备中，侧边栏往往是悬浮于屏幕右侧，很方便用户的使用，但在小屏设备中，屏幕空间有限，所以我们会通过隐藏侧边栏的方式，来节省视口空间的使用
我们先来看下，在大屏设备中，侧边栏如何显示，继而再讲述，从大屏设备切换到小屏设备，侧边栏如何隐藏，国际惯例，先看 HTML 结构代码
CSS 媒体查询代码如下
@media screen and (min-width: 1410px) {
.c_nav_side{
position: absolute;
top: 1000px;
left: 80%;
}
.c_nav_fix{
position: fixed;
top: 140px;
}
.c_nav_tips {
display: none;
}
}
JS 滚动条事件代码如下
$(window).on('scroll', function(){
if($(this).scrollTop() > 855){
$navSide.addClass('c_nav_fix')
}else{
$navSide.removeClass('c_nav_fix')
}
})
min-width:1410px 运行结果
而在一些小屏设备中，如笔记本电脑，屏幕空间有限，我们通常选择将侧边栏进行隐藏，只有在浏览者需要用到侧边栏中的时候，再将侧边栏显示出来，在宽度小于等于 1410 px 的设备中，侧边栏将会在屏幕右侧进行隐藏，并会出现一个提示图片，当鼠标移至图片上时，提示图片隐藏，侧边栏出现；当鼠标从侧边栏上移开时，侧边栏隐藏，提示图片出现
CSS 媒体查询代码如下
@media screen and (max-width: 1410px) {
.c_nav_side {
right: -240px;
position: fixed;
top: 140px;
}
.c_nav_tips {
display: block;
}
}
JS 鼠标事件代码如下
$('.c_nav_tips').on('mouseenter', function(){
$('.c_nav_tips').animate({'right': '-120px'})
$('.c_nav_side').animate({'right': '10px'})
})
$('.c_nav_side').on('mouseleave', function(){
$('.c_nav_tips').animate({'right': '0px'})
$('.c_nav_side').animate({'right': '-240px'})
})
max-width:1410px 运行结果
本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
