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

我试图隐藏导航向下滚动并仅在移动模式中向上滚动时显示。我有一个例子，我发现从另一个网站，使用脚本，只是我不擅长解开和调整我的情况。当浏览器尺寸很小时，你会发现它可以工作。隐藏导航向下滚动并仅在移动时向上滚动

我有了两个版本导航：一个内联当大屏幕的大小和位置是绝对的，在手机屏幕尺寸的第二，一个汉堡包图标下相互开放的菜单项。

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

来源

2015-07-13 KP83

你可以使用设备检测

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

或width()功能

或某种css媒体查询

来源

2015-07-13 11:26:15

谢谢，但我知道我的问题是更多我怎样才能使它与现有的脚本或新的脚本工作。我可以在那里阅读和理解JavaScript，但从头开始编写它并不是那么好。 – KP83

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

回答

相关问题