一些PC端的頁面會有一個fixed定位的側(cè)邊導(dǎo)航欄令杈,我們需要它定點隱藏
- 首先,對側(cè)邊欄的隱藏用visibility:hidden,這樣計算它距離頂部高度時不會因為display:none的問題出現(xiàn)計算誤差
- 計算具體頂部的高度,然后定點顯示
-如果在頁面中部刷新頁面酵颁,側(cè)邊欄不會出現(xiàn)澄暮,必須要先滾動一下,用trigger(scroll)解決先馆。
//CSS
.side { position: fixed; left: 50%; margin-left: 540px; top:30px; z-index: 3; visibility: hidden;width:170px;}
//JS
<script>
var sTop = $(window).scrollTop();
var nowTop = parseInt(sTop);
//當頁面滾動到距離頂部一定距離時顯示右側(cè)固定欄
$(window).bind("scroll", function () {
vHeight = $(window).height();
sTop = $(window).scrollTop();
nowTop = parseInt(sTop);
//自定義高度
if(vHeight<=922){
$(".side").css('visibility','visible');
$(".side").css('top','942px');
}
else{
if (nowTop >= 942) {
$(".side").css('visibility','visible');
$(".side").css('position','fixed');
$(".side").css('top','30px');
}
else {
$(".side").css('visibility','hidden')
}
}
}).trigger('scroll');
</script>