利用JS實作隨頁面捲動顯示/隱藏視窗固定位置元素

視窗固定位置顯示元素，當頁面高度大於某高度，且頁面向下捲動時，顯示該元素；當頁面位置小於某高度，或頁面向上捲動時，隱藏該元素，以下透過本文給大家介紹JS實作隨頁面捲動顯示/隱藏視窗固定位置元素，需要的朋友參考下吧

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

先給大家展示下效果圖：

#1.html

<p id="selected-case-count"><span class=&#39;form-control&#39;>已选: <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();
});
});

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

使用Vue2如何實現三級連動

在JavaScript中如何使用單鍊錶與循環鍊錶

如何解決手機瀏覽器頂部下拉刷新的問題

以上是利用JS實作隨頁面捲動顯示/隱藏視窗固定位置元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！