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