本代码只需要jq即可,不需要其他js类。
添加一个内链
[收起] 文章目录 什么是 Post Type ? 创建文章类型 分类功能 指定模板 设置固定链接 调用文章 这几天新给博客整加了一个功能历史上的今天功能,目前正在研究如何把它调用,放到首页cms布局...
在默认的情况下,我们鼠标下滑后 div header-wrap 会增加一个 tofix 值,这个我们可以在主题的themes.js 中找到,注释掉即可。
//fixnav (scrollValue > 60 && screen.width>640) ? $('#nav-scroll').addClass('tofix'):$('#nav-scroll').removeClass('tofix');
然后添加如下代码即可
CSS部分:
/* -------------------------------- 1. Auto-Hiding Navigation - Simple -------------------------------- */ .header-wrap { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; } .header-wrap.is-hidden { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
JavaScript部分:
jQuery(document).ready(function($){ var mainHeader = $('.header-wrap'), //this applies only if secondary nav is below intro section belowNavHeroContent = $('.sub-nav-hero'), headerHeight = mainHeader.height(); //set scrolling variables var scrolling = false, previousTop = 0, currentTop = 0, scrollDelta = 10, scrollOffset = 10; $(window).on('scroll', function(){ if( !scrolling ) { scrolling = true; (!window.requestAnimationFrame) ? setTimeout(autoHideHeader, 250) : requestAnimationFrame(autoHideHeader); } }); function autoHideHeader() { var currentTop = $(window).scrollTop(); ( belowNavHeroContent.length > 0 ) ? checkStickyNavigation(currentTop) // secondary navigation below intro : checkSimpleNavigation(currentTop); previousTop = currentTop; scrolling = false; } function checkSimpleNavigation(currentTop) { //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'); } } });
最后效果见本站
赞赏历史上的文章
- 2017: MYSQL 批量替换某张表某字段里面的内容( 0)
- 2016: 纯代码实现WordPress自动生成页面静态缓存( 0)
- 2016: 纯代码实现WordPress用户邮箱登录( 0)
除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2019/02/the-tinection-theme-implements-the-automatic-hiding-method-of-the-navigation-bar-sliding-down/
Comments | 3 comments
这个不错 找机会改造下 我还多引入了个js文件~~
@龙笑天我发现一个问题,主题的评论区不显示avatars头像,不知道什么原因,发现你的就没显示,不过在后台是显示的。

