编码两个javascript文件之间的冲突

时间:2017-02-13 17:53:19

标签: javascript jquery ajax history.js

我试图获得一个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 );

0 个答案:

没有答案