DIV CSS 佈局教程網

窗口固定位置顯示元素，當頁面高度大於某高度，並且頁面向下滾動時，顯示該元素；當頁面位置小於某高度，或者頁面向上滾動時，隱藏該元素。

先給大家展示下效果圖：

1.html

<p id="selected-case-count"><span class='form-control'>已選: <span class="casecount">0</span></span></p> 

2.css

p#selected-case-count{
position:fixed; /*固定元素位置*/
top:2px; /*距頂端舉例*/
right:40px; /*距右側位置*/
color:red; 
}

3.js

$(function() {
$("#selected-case-count").hide();
});
var preTop=0;
var currTop=0;
$(function () {
$(window).scroll(function(){
currTop=$(window).scrollTop();
if(currTop<preTop){
$("#selected-case-count").fadeOut(200);
}elseif ($(window).scrollTop()>600){
$("#selected-case-count").fadeIn(500);
}else{
$("#selected-case-count").fadeOut(500);
}
preTop=$(window).scrollTop();
});
});

以上所述是小編給大家分享的JS實現隨頁面滾動顯示/隱藏窗口固定位置元素的相關知識，希望對大有所幫助！