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

Gyue2345 2019-02-07 22:28 LJY2345 | 3 条评论 | 隐藏边栏 215

评分 0 次，平均分 0.0 ：

本代码只需要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');

1 2	//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%);
}

/* --------------------------------

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');
	    }
	}


});

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');

}

});

最后效果见本站

历史上的今天:

javascript WordPress

除特别注明外，本站所有文章均为LJY IT BLOG原创，转载请注明出处来自https://www.ljy2345.com/5786.html

博主作者：Gyue2345 关注：4 粉丝：0最后编辑于：2019年2月15日

LJY IT BLOG的站长。

历史上的今天:

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

相关文章

发表评论

最新文章

标签云更多

猜你喜欢

猜你喜欢

加入本站

站务合作

关于本站

标签云集

注册

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

历史上的今天:

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

相关文章

发表评论

最新文章

标签云更多

猜你喜欢

猜你喜欢

加入本站

站务合作

关于本站

标签云集

登录

注册