卡卡網(wǎng)

在前面文章介紹過【親測(cè)！3種方法】JS判斷滾動(dòng)條上滾下滾，非常詳細(xì)地分析了JS如何判斷滾動(dòng)條上滾下滾。我們可以利用這個(gè)代碼，實(shí)現(xiàn)對(duì)導(dǎo)航欄的顯示、隱藏的控制。當(dāng)滾動(dòng)條上滾時(shí)，顯示導(dǎo)航欄，當(dāng)滾動(dòng)條下滾時(shí)，隱藏導(dǎo)航條。這正是本文要介紹的內(nèi)容，本文將通過兩種方法，介紹如何通過JS實(shí)現(xiàn)滾動(dòng)條上滾下滾時(shí)，顯示隱藏導(dǎo)航欄。

通過代碼測(cè)試的瀏覽器有：Chrome、Firefox、IE11、安卓手機(jī)UC。

demodownload

JS實(shí)現(xiàn)滾動(dòng)條上滾下滾顯示隱藏導(dǎo)航欄：方法一

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í)行完事件后的回調(diào)函數(shù)
/*
   function fn(direction) {
        console.log(direction); //down or up   
    };

    window.onscroll=function(){
         scroll( fn );
    }
*/

demodownload

經(jīng)測(cè)試，上面兩種寫法均可用。

$(this).scrollTop() 是判斷滾動(dòng)條的位置，通過對(duì)比前后的位置，判斷滾動(dòng)條是上滾還是下滾。

獲得是down還是up之后，我們就可以控制顯示隱藏導(dǎo)航欄了。

這方法比較好理解，實(shí)現(xiàn)代碼也比較簡(jiǎn)單。

JS實(shí)現(xiàn)滾動(dòng)條上滾下滾顯示隱藏導(dǎo)航欄：方法二

demodownload

這個(gè)方法其實(shí)是第一種方法的加強(qiáng)版，因?yàn)閾?jù)說第一種方法在蘋果手機(jī)使用時(shí)，導(dǎo)航欄有跳動(dòng)現(xiàn)象。第一種方法是時(shí)刻判斷滾動(dòng)條下滾上滾從而不斷執(zhí)行顯示/隱藏導(dǎo)航條的代碼，這就可能導(dǎo)致閃動(dòng)現(xiàn)象出現(xiàn)，而第二種方法，是它在滾動(dòng)條持續(xù)下滾或上滾時(shí)，只執(zhí)行一次，在下滾或上滾過程中，是不執(zhí)行顯示隱藏導(dǎo)航欄代碼的，從而就可以避免了閃動(dòng)的現(xiàn)象出現(xiàn)。具體詳細(xì)的分析請(qǐng)看【親測(cè)！3種方法】JS判斷滾動(dòng)條上滾下滾。

JS代碼如下：

function scrollDirect(fn)
{
    var beforeScrollTop = $(this).scrollTop(); //滾動(dòng)條頂部位置
    fn = fn || function() {};
    window.addEventListener("scroll", function(event)
    {
        event = event || window.event;
        var afterScrollTop = $(this).scrollTop(); //滾動(dòng)條頂部位置
        //console.log("afterScrollTop=" + $(this).scrollTop());
        delta = afterScrollTop - beforeScrollTop;
        beforeScrollTop = afterScrollTop;
        var scrollTop = $(this).scrollTop(); //滾動(dòng)條頂部位置
        //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滑動(dòng),上滑和下滑只執(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;
        }
    }
});

demodownload

總結(jié)

本文通過兩種方法，介紹了如何通過JS實(shí)現(xiàn)在滾動(dòng)條上滾下滾時(shí)，顯示隱藏導(dǎo)航欄。第一種方法較為簡(jiǎn)單，但可能在蘋果手機(jī)表現(xiàn)欠佳，第二種方法是第一種方法的改良版，在各種設(shè)備表現(xiàn)良好。本文實(shí)例代碼均經(jīng)過本人測(cè)試可用，通過代碼測(cè)試的瀏覽器有：Chrome、Firefox、IE11、安卓手機(jī)UC。

相關(guān)文章

• 【親測(cè)！3種方法】JS判斷滾動(dòng)條上滾下滾
• 【實(shí)例演示/源碼下載】欄目/目錄導(dǎo)航菜單(水平橫向)
• jQuery實(shí)現(xiàn)的水平可滾動(dòng)導(dǎo)航菜單
• 純CSS大氣通用移動(dòng)網(wǎng)頁(yè)導(dǎo)航菜單【演示/源碼下載】
• 純CSS實(shí)現(xiàn)二級(jí)導(dǎo)航菜單(具有伸縮過渡效果)
• CSS實(shí)現(xiàn)Menu Toggle移動(dòng)菜單切換按鈕(打開/關(guān)閉)
• 漂亮的左側(cè)二級(jí)導(dǎo)航菜單(伸縮式)【演示/源碼下載】
• 3款有下橫線平滑過渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)
• 簡(jiǎn)單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)

• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 漂亮的純CSS3水平導(dǎo)航菜單（有過渡動(dòng)畫效果）
• 可以展開和閉合子菜單的CSS3垂直導(dǎo)航菜單
• 又一個(gè)隨內(nèi)容滾動(dòng)而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動(dòng)而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡(jiǎn)單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】
• CSS3+JQuery實(shí)現(xiàn)的三級(jí)下拉導(dǎo)航菜單

標(biāo)簽: 欄目導(dǎo)航  導(dǎo)航菜單  滾動(dòng)條