本人之前使用TypechoHandsome,偶尔一次机会看到了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就可以了