javascript - 仅在移动设备中向下滚动时隐藏导航并向上滚动时显示

Question

我试图仅在移动模式下向下滚动时隐藏我的导航并在向上滚动时显示。我有一个例子，是我从另一个网站上找到的，该网站使用的脚本具有相同的功能，只是我不太擅长根据自己的情况进行分析和调整。当浏览器尺寸较小时，您会看到它可以正常工作。

--> Example website

我有一个有两个版本的导航:一个在大屏幕尺寸和位置是绝对的时内联，第二个在移动屏幕尺寸下带有汉堡包图标，打开彼此下方的菜单项。

--> Fiddle

<header>
<nav>
    <div class="mobile-nav">
        <div class="nav-toggle"><i class="nav-icon"></i></div>
    </div>
    <ul class="left-nav">   
        <li class="home"><a href="#">Pixelation</a></li>    
    </ul>
    <ul class="right-nav">  
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>

示例网站的部分脚本

   hideShowMobileNav = function(setOldScroll) {
    if (stateMap.scrollTop != stateMap.oldScrollTop && stateMap.scrollTop > 100) {
        if (stateMap.scrollTop > stateMap.oldScrollTop) {
            jqueryMap.$nav.addClass('hidden');
        } else {
            jqueryMap.$nav.removeClass('hidden');
        }
    }
    if (setOldScroll) {
        stateMap.oldScrollTop = stateMap.scrollTop;
    }
};

Answer 1

你可以使用设备检测

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    // Do something
} else {
    // Do something else
}

或width()函数

或者某种CSS媒体查询