本人之前使用Typecho的Handsome，偶尔一次机会看到了Matery这个主题，感觉非常漂亮，于是就有了换到Hexo的冲动，当我按照教程安装完成后，发现导航栏一直固定在顶部，当页面向下滚动的时候，就会遮拦住一些内容（主要是本人在首页增加了公告栏），所以就想让导航栏在离开首页后，当页面向下滚动的时候自动隐藏掉，向上滚动的时候出现，这样也不影响移动端调出菜单的需求。有了这个想法，就动手吧！

1. 首先给matery\source\css\my.css添加如下css样式：

.navbar-fixed.is-hidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

1. 在matery\source\js下新建autohidenav.js文件，内容如下：

jQuery(document).ready(function($){
    var mainHeader = $('.navbar-fixed'),
        headerHeight = mainHeader.height();
    
    //set scrolling variables
    var scrolling = false,
        previousTop = 0,
        currentTop = 0,
        scrollDelta = 10,
        scrollOffset = 150;

    $(window).on('scroll', function(){
        if( !scrolling ) {
            scrolling = true;
            (!window.requestAnimationFrame)
                ? setTimeout(autoHideHeader, 250)
                : requestAnimationFrame(autoHideHeader);
        }
    });

    function autoHideHeader() {
        var currentTop = $(window).scrollTop();

        //there's no secondary nav or secondary nav is below primary nav
        if (previousTop - currentTop > scrollDelta) {
            //if scrolling up...
            mainHeader.removeClass('is-hidden');
        } else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
            //if scrolling down...
            mainHeader.addClass('is-hidden');
        }
        // scroll at bottom
        if (currentTop + $(window).height() == $(document).height()) {
            // load data
            mainHeader.removeClass('is-hidden');
        }
           previousTop = currentTop;
        scrolling = false;
    }
});

1. 在matery\layout\_partial\head.ejs文件</head>前添加如下代码：

<script src="<%- theme.jsDelivr.url %>/js/autohidenav.js"></script>

1. 如果你有时候又想固定，那我们在主题配置文件中加一个开关吧，在_config.yml中加入配置代码：

#是否开启导航栏自动隐藏
autohidenav:
  enable: true

然后将刚才在head.ejs中添加的代码修改为：

<% if (theme.autohidenav.enable) { %>
    <script src="<%- theme.jsDelivr.url %>/js/autohidenav.js"></script>
<% } %>

当你想要固定的时候，只需要将配置文件中的true改为false就可以了