我试图获得一个Jekyll网站设置,我希望导航在向下滚动时隐藏,并在向上滚动时显示。我还想用pushState设置ajax加载,以便我可以设置页面过渡动画。我有导航隐藏并正确显示滚动,直到我输入代码进行ajax加载。现在,导航将隐藏并正确显示,直到我点击链接,然后无论如何都会保持显示。
我假设它已经破解,因为我使用了两个不同的jQuery库,但导航不能在v2上工作,而ajax加载不能在v3上工作。它们都可以单独使用。我真的可以帮上忙。
这是我的HTML用于加载文件的样子:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled/html4+html5/jquery.history.js"></script>
<script src="js/ajax.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/hide-navigation.js"></script>
这是navigation.js
jQuery(document).ready(function($){
var mainHeader = $('.cd-auto-hide-header'),
secondaryNavigation = $('.cd-secondary-nav'),
//this applies only if secondary nav is below intro section
belowNavHeroContent = $('.sub-nav-hero'),
headerHeight = mainHeader.height();
var isLateralNavAnimating = false;
//set scrolling variables
var scrolling = false,
previousTop = 0,
currentTop = 0,
scrollDelta = 10,
scrollOffset = 0;
mainHeader.on('click', '.nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length >= 0 ) isLateralNavAnimating = true;
mainHeader.toggleClass('nav-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
$(window).on('scroll', function(){
if( !scrolling && !mainHeader.hasClass("nav-open")) {
scrolling = true;
(!window.requestAnimationFrame)
? setTimeout(autoHideHeader, 250)
: requestAnimationFrame(autoHideHeader);
}
});
$(window).on('resize', function(){
headerHeight = mainHeader.height();
});
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');
}
}
function checkStickyNavigation(currentTop) {
//secondary nav below intro section - sticky secondary nav
var secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height();
if (previousTop >= currentTop ) {
//if scrolling up...
if( currentTop < secondaryNavOffsetTop ) {
//secondary nav is not fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('fixed slide-up');
belowNavHeroContent.removeClass('secondary-nav-fixed');
} else if( previousTop - currentTop > scrollDelta ) {
//secondary nav is fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('slide-up').addClass('fixed');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
} else {
//if scrolling down...
if( currentTop > secondaryNavOffsetTop + scrollOffset ) {
//hide primary nav
mainHeader.addClass('is-hidden');
secondaryNavigation.addClass('fixed slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
} else if( currentTop > secondaryNavOffsetTop ) {
//once the secondary nav is fixed, do not hide primary nav if you haven't scrolled more than scrollOffset
mainHeader.removeClass('is-hidden');
secondaryNavigation.addClass('fixed').removeClass('slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
}
}
});
最后是ajax.js
( function( $, History, undefined ) {
if ( !History.enabled ) {
return false;
}
var $wrap = $( "#wrap" );
$wrap.on( "click", ".page-link", function( event ) {
event.preventDefault();
if ( window.location === this.href ) {
return;
}
var pageTitle = ( this.title ) ? this.title : this.textContent;
pageTitle = ( this.getAttribute( "rel" ) === "home" ) ? pageTitle : pageTitle + " — Acme";
History.pushState( null, pageTitle, this.href );
} );
History.Adapter.bind( window, "statechange", function() {
var state = History.getState();
$.get( state.url, function( res ) {
$.each( $( res ), function( index, elem ) {
if ( $wrap.selector !== "#" + elem.id ) {
return;
}
$wrap
.html( $( elem ).html() )
.promise()
.done( function( res ) {
if ( typeof ga === "function" && res.length !== 0 ) { // Make sure the new content is added, and the 'ga()' method is available.
ga('set', {
page: window.location.pathname,
title: state.title
});
ga('send', 'pageview');
}
});
} );
} );
} );
} )( jQuery, window.History );