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)文章
本文為大家介紹下使用javascript實現(xiàn)簡單的Map，可以對map進(jìn)行獲取、判斷、刪除、增加等等，感興趣的朋友可以了解下2013-12-12
本篇文章主要是對使用js判斷控件是否獲得焦點的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
每天都有大量網(wǎng)友申請加入我的團(tuán)隊，于是審核團(tuán)隊新成員成了一個費力氣的活兒，在此情況下，我寫了個腳本，自動計算他們的回答采納率，采納率低于20%的自動打勾 選中，等級太低的人也自動打勾選中2014-02-02
require簡單實現(xiàn)單頁應(yīng)用程序(SPA)
下面小編就為大家?guī)硪黄猺equire簡單實現(xiàn)單頁應(yīng)用程序(SPA)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了微信小程序分享功能之按鈕button 邊框隱藏和點擊隱藏,需要的朋友可以參考下2018-06-06
用js實現(xiàn)的拖動表格的tr行的實現(xiàn)代碼，需要的朋友可以參考下。2011-05-05
JS中type="button"和type="submit"的區(qū)別
Submit是專門用于提交表單的Button，與Button的區(qū)別主要有兩點：type=button 就單純是按鈕功能，type=submit 是發(fā)送表單 。下面通過本文給大家分享JS中type="button"和type="submit"的區(qū)別，感興趣的的朋友一起看看吧2017-07-07
這篇文章主要是對js控制的導(dǎo)航菜單實例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript懶加載與預(yù)加載原理與實現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
JS日期轉(zhuǎn)化指定格式及獲取月/周日期區(qū)間的方法
本文詳細(xì)介紹了JavaScript中Date類型的處理方法,包括日期的格式轉(zhuǎn)換和獲取特定月份或周的日期區(qū)間,本文介紹JS日期轉(zhuǎn)化指定格式及獲取月/周日期區(qū)間的方法,感興趣的朋友跟隨小編一起看看吧2024-09-09