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

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

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

添加一个内链

在默认的情况下，我们鼠标下滑后 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)