英文版原文地址：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
        }
    } 
}

浏览器支持情况：

扫码关注w3ctech微信公众号