本人之前使用Typecho
的Handsome
,偶尔一次机会看到了Matery
这个主题,感觉非常漂亮,于是就有了换到Hexo
的冲动,当我按照教程安装完成后,发现导航栏一直固定在顶部,当页面向下滚动的时候,就会遮拦住一些内容(主要是本人在首页增加了公告栏),所以就想让导航栏在离开首页后,当页面向下滚动的时候自动隐藏掉,向上滚动的时候出现,这样也不影响移动端调出菜单的需求。有了这个想法,就动手吧!
- 首先给
matery\source\css\my.css
添加如下css
样式:
.navbar-fixed.is-hidden {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
- 在
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;
}
});
- 在
matery\layout\_partial\head.ejs
文件</head>
前添加如下代码:
<script src="<%- theme.jsDelivr.url %>/js/autohidenav.js"></script>
- 如果你有时候又想固定,那我们在主题配置文件中加一个开关吧,在
_config.yml
中加入配置代码:
#是否开启导航栏自动隐藏
autohidenav:
enable: true
然后将刚才在head.ejs
中添加的代码修改为:
<% if (theme.autohidenav.enable) { %>
<script src="<%- theme.jsDelivr.url %>/js/autohidenav.js"></script>
<% } %>
当你想要固定的时候,只需要将配置文件中的true
改为false
就可以了
博主,按照你的方法添加,但是还是没有自动隐藏导航栏啊