|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
JS兩種方法滾動條上滾下滾顯示隱藏導航欄【親測可用】
作者:admin 時間:2022-4-25 10:9:6 瀏覽:在前面文章介紹過【親測！3種方法】JS判斷滾動條上滾下滾，非常詳細地分析了JS如何判斷滾動條上滾下滾。我們可以利用這個代碼，實現(xiàn)對導航欄的顯示、隱藏的控制。當滾動條上滾時，顯示導航欄，當滾動條下滾時，隱藏導航條。這正是本文要介紹的內(nèi)容，本文將通過兩種方法，介紹如何通過JS實現(xiàn)滾動條上滾下滾時，顯示隱藏導航欄。
通過代碼測試的瀏覽器有：Chrome、Firefox、IE11、安卓手機UC。
JS實現(xiàn)滾動條上滾下滾顯示隱藏導航欄：方法一
JS代碼
function scroll(fn)
{
var beforeScrollTop = $(this).scrollTop(),
fn = fn || function() {};
window.addEventListener("scroll", function()
{
var afterScrollTop = $(this).scrollTop(),
delta = afterScrollTop - beforeScrollTop;
if (delta === 0) return false;
fn(delta > 0 ? "down" : "up");
beforeScrollTop = afterScrollTop;
}, false);
}
//第一種寫法
scroll(function(direction)
{
console.log(direction);
if (direction == "up")
{
document.getElementById("tip").style.display = "block";
}
else if (direction == "down")
{
document.getElementById("tip").style.display = "none";
}
});
//第二種寫法執(zhí)行完事件后的回調函數(shù)
/*
function fn(direction) {
console.log(direction); //down or up
};
window.onscroll=function(){
scroll( fn );
}
*/
經(jīng)測試，上面兩種寫法均可用。
$(this).scrollTop() 是判斷滾動條的位置，通過對比前后的位置，判斷滾動條是上滾還是下滾。
獲得是down還是up之后，我們就可以控制顯示隱藏導航欄了。
這方法比較好理解，實現(xiàn)代碼也比較簡單。
JS實現(xiàn)滾動條上滾下滾顯示隱藏導航欄：方法二
這個方法其實是第一種方法的加強版，因為據(jù)說第一種方法在蘋果手機使用時，導航欄有跳動現(xiàn)象。第一種方法是時刻判斷滾動條下滾上滾從而不斷執(zhí)行顯示/隱藏導航條的代碼，這就可能導致閃動現(xiàn)象出現(xiàn)，而第二種方法，是它在滾動條持續(xù)下滾或上滾時，只執(zhí)行一次，在下滾或上滾過程中，是不執(zhí)行顯示隱藏導航欄代碼的，從而就可以避免了閃動的現(xiàn)象出現(xiàn)。具體詳細的分析請看【親測！3種方法】JS判斷滾動條上滾下滾。
JS代碼如下：
function scrollDirect(fn)
{
var beforeScrollTop = $(this).scrollTop(); //滾動條頂部位置
fn = fn || function() {};
window.addEventListener("scroll", function(event)
{
event = event || window.event;
var afterScrollTop = $(this).scrollTop(); //滾動條頂部位置
//console.log("afterScrollTop=" + $(this).scrollTop());
delta = afterScrollTop - beforeScrollTop;
beforeScrollTop = afterScrollTop;
var scrollTop = $(this).scrollTop(); //滾動條頂部位置
//console.log("$(this).scrollTop()=" + $(this).scrollTop());
var scrollHeight = $(document).height(); //文檔高度
//console.log("$(document).height()=" + $(document).height());
var windowHeight = $(this).height(); //窗口高度
//console.log("$(this).height()=" + $(this).height());
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height() - 10)
{
fn('up');
}
else
{
if (Math.abs(delta) < 10)
{
return false;
}
fn(delta > 0 ? "down" : "up");
}
}, false);
}
var upflag = 1;
var downflag = 1;
//scroll滑動,上滑和下滑只執(zhí)行一次！
scrollDirect(function(direction)
{
if (direction == "down")
{
if (downflag)
{
console.log("down");
document.getElementById("tip").style.display = "none";
downflag = 0;
upflag = 1;
}
}
if (direction == "up")
{
if (upflag)
{
console.log("up");
document.getElementById("tip").style.display = "block";
downflag = 1;
upflag = 0;
}
}
});
總結
本文通過兩種方法，介紹了如何通過JS實現(xiàn)在滾動條上滾下滾時，顯示隱藏導航欄。第一種方法較為簡單，但可能在蘋果手機表現(xiàn)欠佳，第二種方法是第一種方法的改良版，在各種設備表現(xiàn)良好。本文實例代碼均經(jīng)過本人測試可用，通過代碼測試的瀏覽器有：Chrome、Firefox、IE11、安卓手機UC。
相關文章
- 站長推薦
