我们新增Dark Mode(暗模式),(只是在晚上)可以改变MAC OS&Windows系统的暗模式实现切换;安卓和苹果手机是一样的。
日志随笔

tinection主题实现导航条下滑自动隐藏方法

gyue2345·2019-02-07·322 次阅读··

   2019-02-07 22:28 LJY2345    3 条评论   隐藏边栏   黑色模式    322 
   评分 0 次,平均分 0.0    3 条评论   隐藏边栏   黑色模式

本代码只需要jq即可,不需要其他js类。

添加一个内链

WordPress如何自定义一个post_type,reviwe重写链接

[收起] 文章目录 什么是 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');
	    }
	}


});

最后效果见本站

赞赏

历史上的文章

博 主作者: 关注:6    粉丝:1最后编辑于:2022年9月1日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - 3 comments

Comments | 3 comments

🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL