CSS 侧边栏在小屏设备中进行隐藏

<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>

@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;
    }
}

$(window).on('scroll', function(){
    if($(this).scrollTop() > 855){
        $navSide.addClass('c_nav_fix');
    }else{
        $navSide.removeClass('c_nav_fix');
    }
});

@media screen and (max-width: 1410px) {
    .c_nav_side {
        right: -240px;
        position: fixed;
        top: 140px;
    }
    .c_nav_tips {
        display: block;
    }
}

$('.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'});
})