JS實現(xiàn)隨頁面滾動顯示/隱藏窗口固定位置元素
更新時間：2016年02月26日 09:06:51 作者：T.//王大胖
窗口固定位置顯示元素，當(dāng)頁面高度大于某高度，并且頁面向下滾動時，顯示該元素；當(dāng)頁面位置小于某高度，或者頁面向上滾動時，隱藏該元素，下面通過本文給大家介紹JS實現(xiàn)隨頁面滾動顯示/隱藏窗口固定位置元素，需要的朋友參考下吧
窗口固定位置顯示元素，當(dāng)頁面高度大于某高度，并且頁面向下滾動時，顯示該元素；當(dāng)頁面位置小于某高度，或者頁面向上滾動時，隱藏該元素。
先給大家展示下效果圖：
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; /*距右側(cè)位置*/
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實現(xiàn)隨頁面滾動顯示/隱藏窗口固定位置元素的相關(guān)知識，希望對大有所幫助！
相關(guān)文章
這篇文章主要介紹了JS原型對象操作,結(jié)合實例形式分析了JS原型對象基本原理、用法及操作注意事項,需要的朋友可以參考下2020-06-06
setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層容器名稱, 這是用來設(shè)定一個時間, 時間到了, 就會執(zhí)行一個指定的 method，下面這篇文章主要給大家介紹了關(guān)于setTimeout時間設(shè)置為0的相關(guān)資料，需要的朋友可以參考下。2018-03-03
for?循環(huán)是出現(xiàn)最早，也是應(yīng)用最普遍的一個遍歷，能夠滿足絕大多數(shù)的遍歷?？梢员闅v?數(shù)組、對象、字符串。本文將詳細為大家介紹JS中的六種For循環(huán)的使用，需要的可以參考一下2022-04-04
這篇文章主要介紹了JavaScript實現(xiàn)滑動選擇日期功能，基于sui-mobile的移動端實現(xiàn)，感興趣的小伙伴們可以參考一下2016-06-06
Javascript獲取隨機數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript獲取隨機數(shù)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
談?wù)凧avaScript自定義回調(diào)函數(shù)
使用Jquery的時候發(fā)現(xiàn)它里面的很多方法都提供回調(diào)函數(shù)，接下來通過本篇文章給大家介紹js自定義回調(diào)函數(shù)，需要的朋友參考下2015-10-10
相信大家現(xiàn)在都知道微信小程序吧，下面這篇文章主要給大家介紹了微信小程序開發(fā)之map地圖的相關(guān)資料，分享出來供大家參考學(xué)習(xí)，文中通過示例代碼介紹的非常詳細，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
今天小編就為大家分享一篇JS的Ajax與后端交互數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
css樣式標(biāo)簽和js語法屬性區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
echarts實現(xiàn)平面的柱狀圖很順利,但是用戶為了美觀立體感,用到圓柱體圖,下面這篇文章主要給大家介紹了關(guān)于ECharts繪制立體柱狀圖(圓柱體)的相關(guān)資料,需要的朋友可以參考下2023-11-11