Question

我试图隐藏我的导航向下滚动并仅在移动模式下向上滚动显示。我有一个例子，我从另一个网站上找到了一个使用脚本的脚本只做了同样的事情我不是很好解开并根据我的情况进行调整。当浏览器尺寸很小时，您会看到它正常工作。

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

<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媒体查询

隐藏导航向下滚动并仅在移动时向上滚动显示

1 个答案: