只有在移动设备中，才能在向下滚动时隐藏导航并在向上滚动时显示

Hide nav on scroll down and show on scroll up only when in mobile

本文关键字：滚动 隐藏 显示 导航 移动      更新时间：2023-09-26

我试图隐藏我的导航向下滚动，只有在移动模式下才显示在向上滚动。我有一个例子，我从另一个网站上找到了一个脚本，它做了同样的事情，只是我不太擅长分解和调整它来适应我的情况。当浏览器很小的时候，你可以看到它的工作原理。

->示例网站

我有一个导航，它有两个版本:一个是内联的，当在大屏幕上，位置是绝对的;第二个是在移动屏幕上，用汉堡包图标打开菜单项。

——>小提琴

<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;
    }
};

可以使用设备检测

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

或width()函数

或其他CSS媒体查询

相关文章：