英文版原文地址:http://codyhouse.co/gem/smart-fixed-navigation/

我们在浏览器网站的时候,当我们将浏览器滚动到一定程度时,将在右下角出现一个图标,这个图标可以帮助我们回到页面顶部,这种体验一般情况是为了帮助你快速回到顶部,减少滚动条,同时可以在顶部操作导航,当然如果仅仅是为了操作导航,我们现在还看到有很多方法,比如将导航固定在头部或者底部,但是这个区域太高,会遮挡到内容,现在有一种新的交互方式,我们可以来看看效果:

智能固定导航效果

实现方法如下:

<header><!-- ... --></header>
<div id="cd-nav">
 <a href="#0" class="cd-nav-trigger">Menu<span></span></a>
 <nav id="cd-main-nav">
 <ul>
 <li><a href="#0">Homepage</a></li>
 <li><a href="#0">Services</a></li>
 <li><a href="#0">Portfolio</a></li>
 <li><a href="#0">Pricing</a></li>
 <li><a href="#0">Contact</a></li>
 </ul>
 </nav>
</div>
<main><!-- content here --></main>

#cd-nav ul {
 /* mobile first */
 position: fixed;
 width: 90%;
 max-width: 400px;
 right: 5%;
 bottom: 20px;
 visibility: hidden;
 overflow: hidden;
 z-index: 1;
 transform: scale(0);
 transform-origin: 100% 100%;
 transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul.is-visible {
 visibility: visible;
 transform: scale(1);
 transition: transform 0.3s, visibility 0s 0s;
}
.cd-nav-trigger {
 position: fixed;
 bottom: 20px;
 right: 5%;
 width: 44px;
 height: 44px;
 /* image replacement */
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 z-index: 2;
}

@media only screen and (min-width: 1170px) {
 #cd-nav ul {
 /* the navigation moves to the top */
 position: absolute;
 width: auto;
 max-width: none;
 bottom: auto;
 top: 36px;
 visibility: visible;
 transform: scale(1);
 transition: all 0s;
 }
 #cd-nav.is-fixed ul {
 position: fixed;
 width: 90%;
 max-width: 400px;
 bottom: 20px;
 top: auto;
 visibility: hidden;
 transform: scale(0);
 }
}

// browser window scroll (in pixels) after which the "menu" link is shown
var offset = 300;

var navigationContainer = $('#cd-nav'),
 mainNavigation = navigationContainer.find('#cd-main-nav ul');
$(window).scroll(function(){
 checkMenu();
});
function checkMenu() {
 if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
 //add .is-fixed class to #cd-nav 
 //wait for the animation to end 
 //add the .has-transitions class to main navigation (used to bring back transitions)
 } else if ($(window).scrollTop() <= offset) {
 //check if the menu is open when scrolling up - for browser that supports transition
 if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
 //close the menu 
 //wait for the transition to end 
 //remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
 } 
 //check if the menu is open when scrolling up - fallback if transitions are not supported
 else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
 //no need to wait for the end of transition - close the menu and remove the .is-fixed class from the #cd-nav
 } 
 //scrolling up with menu closed
 else {
 //remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
 }
 } 
}

浏览器支持情况:

浏览器支持情况