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