侧边栏的作用应该就不用多说了吧，能够很方便我们回到网页的指定位置，在大屏设备中，侧边栏往往是悬浮于屏幕右侧，很方便用户的使用，但在小屏设备中，屏幕空间有限，所以我们会通过隐藏侧边栏的方式，来节省视口空间的使用
我们先来看下，在大屏设备中，侧边栏如何显示，继而再讲述，从大屏设备切换到小屏设备，侧边栏如何隐藏，国际惯例，先看 HTML 结构代码
代码语言：javascript复制<div id="nav_1">
<img src="img/1.jpg">
</div>
<div id="nav_2">
<img src="img/2.jpg">
</div>
<div id="nav_3">
<img src="img/3.jpg">
</div>
<div id="nav_4">
<img src="img/4.jpg">
</div>
<div class="c_nav_tips"></div>
<div class="c_nav_side">
<ul>
<li>
<a href="#nav_1" class="c_nav_1"></a>
</li>
<li>
<a href="#nav_2" class="c_nav_2"></a>
</li>
<li>
<a href="#nav_3" class="c_nav_3"></a>
</li>
<li>
<a href="#nav_4" class="c_nav_4"></a>
</li>
</ul>
</div>CSS 媒体查询代码如下
代码语言：javascript复制@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 滚动条事件代码如下
代码语言：javascript复制$(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 媒体查询代码如下
代码语言：javascript复制@media screen and (max-width: 1410px) {
.c_nav_side {
right: -240px;
position: fixed;
top: 140px;
}
.c_nav_tips {
display: block;
}
}JS 鼠标事件代码如下
代码语言：javascript复制$('.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
