本代码只需要jq即可，不需要其他js类。
添加一个内链
WordPress如何自定义一个post_type，reviwe重写链接
[收起] 文章目录 什么是 Post Type ？ 创建文章类型 分类功能 指定模板 设置固定链接 调用文章 这几天新给博客整加了一个功能历史上的今天功能，目前正在研究如何把它调用，放到首页cms布局指定位置。功能只是非...
在默认的情况下，我们鼠标下滑后 div header-wrap 会增加一个 tofix 值，这个我们可以在主题的themes.js 中找到，注释掉即可。
|
1 2 |
//fixnav (scrollValue > 60 && screen.width>640) ? $('#nav-scroll').addClass('tofix'):$('#nav-scroll').removeClass('tofix'); |
然后添加如下代码即可
CSS部分：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* -------------------------------- 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部分：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
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/5786.html
关于作者：Gyue2345
扫一扫打赏
支付宝扫一扫打赏
7XIN%7BOX7.jpg)
微信扫一扫打赏
.gif)
这个不错 找机会改造下 我还多引入了个js文件~~
@龙笑天我发现一个问题，主题的评论区不显示avatars头像，不知道什么原因，发现你的就没显示，不过在后台是显示的。
查看图片
查看图片