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

行文過程中出現錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人，最后，如果你覺得我的文章寫的還不錯，希望能夠點一下喜歡和關注，為了我能早日成為簡書優秀作者獻上一發助攻吧，謝謝！^ ^

總結

以上是生活随笔為你收集整理的小屏隐藏大屏幕显示css,CSS 侧边栏在小屏设备中进行隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。