Переход страницы, вызывающий мобильную навигацию, чтобы быть незаметной

Question

У меня есть два основных элемента jQuery. Одним из них является переход на страницу, который заменяет содержимое страницы другой страницей, а другой - смарт-навигацией (мобильная навигация на мобильных устройствах и прокрутка страниц).

Переходы и навигация отлично работают на настольных устройствах. Проблема в том, что когда вы переходите на мобильный навигатор, он становится неаккуратным.

Это происходит только после того, как вы сделали переход страницы, поэтому я убежден, что они каким-то образом конфликтуют.

Живая страница здесь https://nathanworking.github.io/page-transition-smart-nav/

Два сценария ниже. Примечание: то, что я сделал для объединения этих произведений, просто имеет «Анимированные переходы страницы», затем «Умная навигация» 2-го в моем .js-файле.

Если я просто совмещаю эти две ошибки, у кого-нибудь есть мысли о том, как их объединить?

Спасибо за помощь!

анимированные переходы страниц

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

    ----- Animated Page transitions ------ 

--------------------------------------*/ 
jQuery(document).ready(function(event){ 
    var isAnimating = false, 
    newLocation = ''; 
    firstLoad = false; 

    //trigger smooth transition from the actual page to the new one 
    $('body').on('click', '[data-type="page-transition"]', function(event){ 
    event.preventDefault(); 
    //detect which page has been selected 
    var newPage = $(this).attr('href'); 
    //if the page is not already being animated - trigger animation 
    if(!isAnimating) changePage(newPage, true); 
    firstLoad = true; 
    }); 

    //detect the 'popstate' event - e.g. user clicking the back button 
    $(window).on('popstate', function() { 
    if(firstLoad) { 
     /* 
     Safari emits a popstate event on page load - check if firstLoad is true before animating 
     if it's false - the page has just been loaded 
     */ 
     var newPageArray = location.pathname.split('/'), 
     //this is the url of the page to be loaded 
     newPage = newPageArray[newPageArray.length - 1]; 

     if(!isAnimating && newLocation != newPage) changePage(newPage, false); 
    } 
    firstLoad = true; 
    }); 

    function changePage(url, bool) { 
    isAnimating = true; 
    // trigger page animation 
    $('body').addClass('page-is-changing'); 
    $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
     loadNewContent(url, bool); 
     newLocation = url; 
     $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
    }); 
    //if browser doesn't support CSS transitions 
    if(!transitionsSupported()) { 
     loadNewContent(url, bool); 
     newLocation = url; 
    } 
    } 

    function loadNewContent(url, bool) { 
     url = ('' == url) ? 'index.html' : url; 
    var newSection = 'cd-'+url.replace('.html', ''); 
    var section = $('<div class="cd-main-content '+newSection+'"></div>'); 

    section.load(url+' .cd-main-content > *', function(event){ 
     // load new content and replace <main> content with the new one 
     $('main').html(section); 
     //if browser doesn't support CSS transitions - dont wait for the end of transitions 
     var delay = (transitionsSupported()) ? 1200 : 0; 
     setTimeout(function(){ 
     //wait for the end of the transition on the loading bar before revealing the new content 
     (section.hasClass('cd-about')) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about'); 
     $('body').removeClass('page-is-changing'); 
     $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
      isAnimating = false; 
      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
     }); 

     if(!transitionsSupported()) isAnimating = false; 
     }, delay); 

     if(url!=window.location && bool){ 
     //add the new page to the window.history 
     //if the new page was triggered by a 'popstate' event, don't add it 
     window.history.pushState({path: url},'',url); 
     }       

     }); 
    } 

    function transitionsSupported() { 
    return $('html').hasClass('csstransitions'); 
    } 
}); 

Смарт Навигация

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

    ----- Smart Navigation ------ 

--------------------------------------*/ 
jQuery(document).ready(function($){ 
    // browser window scroll (in pixels) after which the "menu" link is shown 
    var offset = 300; 

    var navigationContainer = $('#cd-nav'), 
     mainNavigation = navigationContainer.find('#cd-main-nav ul'); 

    //hide or show the "menu" link 
    checkMenu(); 
    $(window).scroll(function(){ 
     checkMenu(); 
    }); 

    //open or close the menu clicking on the bottom "menu" link 
    $('.cd-nav-trigger').on('click', function(){ 
     $(this).toggleClass('menu-is-open'); 
     //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open) 
     mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible'); 

    }); 

    function checkMenu() { 
     if($(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { 
      navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
       mainNavigation.addClass('has-transitions'); 
      }); 
     } else if ($(window).scrollTop() <= offset) { 
      //check if the menu is open when scrolling up 
      if(mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions')) { 
       //close the menu with animation 
       mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
        //wait for the menu to be closed and do the rest 
        mainNavigation.removeClass('is-visible is-hidden has-transitions'); 
        navigationContainer.removeClass('is-fixed'); 
        $('.cd-nav-trigger').removeClass('menu-is-open'); 
       }); 
      //check if the menu is open when scrolling up - fallback if transitions are not supported 
      } else if(mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions')) { 
        mainNavigation.removeClass('is-visible has-transitions'); 
        navigationContainer.removeClass('is-fixed'); 
        $('.cd-nav-trigger').removeClass('menu-is-open'); 
      //scrolling up with menu closed 
      } else { 
       navigationContainer.removeClass('is-fixed'); 
       mainNavigation.removeClass('has-transitions'); 
      } 
     } 
    } 
}); 

С комментарием от ryancdotnet - это правильный JQuery:

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

    ----- Animated Page transitions ------ 

--------------------------------------*/ 
jQuery(document).ready(function(event){ 
    var isAnimating = false, 
    newLocation = ''; 
    firstLoad = false; 

    //trigger smooth transition from the actual page to the new one 
    $('body').on('click', '[data-type="page-transition"]', function(event){ 
    event.preventDefault(); 
    //detect which page has been selected 
    var newPage = $(this).attr('href'); 
    //if the page is not already being animated - trigger animation 
    if(!isAnimating) changePage(newPage, true); 
    firstLoad = true; 
    }); 

    //detect the 'popstate' event - e.g. user clicking the back button 
    $(window).on('popstate', function() { 
    if(firstLoad) { 
     /* 
     Safari emits a popstate event on page load - check if firstLoad is true before animating 
     if it's false - the page has just been loaded 
     */ 
     var newPageArray = location.pathname.split('/'), 
     //this is the url of the page to be loaded 
     newPage = newPageArray[newPageArray.length - 1]; 

     if(!isAnimating && newLocation != newPage) changePage(newPage, false); 
    } 
    firstLoad = true; 
    }); 

    function changePage(url, bool) { 
    isAnimating = true; 
    // trigger page animation 
    $('body').addClass('page-is-changing'); 
    $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
     loadNewContent(url, bool); 
     newLocation = url; 
     $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
    }); 
    //if browser doesn't support CSS transitions 
    if(!transitionsSupported()) { 
     loadNewContent(url, bool); 
     newLocation = url; 
    } 
    } 

    function loadNewContent(url, bool) { 
     url = ('' == url) ? 'index.html' : url; 
    var newSection = 'cd-'+url.replace('.html', ''); 
    var section = $('<div class="cd-main-content '+newSection+'"></div>'); 

    section.load(url+' .cd-main-content > *', function(event){ 
     // load new content and replace <main> content with the new one 
     $('main').html(section); 
     //if browser doesn't support CSS transitions - dont wait for the end of transitions 
     var delay = (transitionsSupported()) ? 1200 : 0; 
     setTimeout(function(){ 
     //wait for the end of the transition on the loading bar before revealing the new content 
     (section.hasClass('cd-about')) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about'); 
     $('body').removeClass('page-is-changing'); 
     $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
      isAnimating = false; 
      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
     }); 

// ----- Animated Page transitions ------ 
       //open or close the menu clicking on the bottom "menu" link 
       jQuery(document).ready(function($){ 
        // browser window scroll (in pixels) after which the "menu" link is shown 
        var offset = 300; 

        var navigationContainer = $('#cd-nav'), 
         mainNavigation = navigationContainer.find('#cd-main-nav ul'); 

        //hide or show the "menu" link 
        checkMenu(); 
        $(window).scroll(function(){ 
         checkMenu(); 
        }); 

        //open or close the menu clicking on the bottom "menu" link 
        $('.cd-nav-trigger').on('click', function(){ 
         $(this).toggleClass('menu-is-open'); 
         //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open) 
         mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible'); 

        }); 

        function checkMenu() { 
         if($(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { 
          navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
           mainNavigation.addClass('has-transitions'); 
          }); 
         } else if ($(window).scrollTop() <= offset) { 
          //check if the menu is open when scrolling up 
          if(mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions')) { 
           //close the menu with animation 
           mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
            //wait for the menu to be closed and do the rest 
            mainNavigation.removeClass('is-visible is-hidden has-transitions'); 
            navigationContainer.removeClass('is-fixed'); 
            $('.cd-nav-trigger').removeClass('menu-is-open'); 
           }); 
          //check if the menu is open when scrolling up - fallback if transitions are not supported 
          } else if(mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions')) { 
            mainNavigation.removeClass('is-visible has-transitions'); 
            navigationContainer.removeClass('is-fixed'); 
            $('.cd-nav-trigger').removeClass('menu-is-open'); 
          //scrolling up with menu closed 
          } else { 
           navigationContainer.removeClass('is-fixed'); 
           mainNavigation.removeClass('has-transitions'); 
          } 
         } 
        } 
       }); 
// ----- Animated Page transitions ------ 

     if(!transitionsSupported()) isAnimating = false; 
     }, delay); 

     if(url!=window.location && bool){ 
     //add the new page to the window.history 
     //if the new page was triggered by a 'popstate' event, don't add it 
     window.history.pushState({path: url},'',url); 
     } 

     }); 
    } 

    function transitionsSupported() { 
    return $('html').hasClass('csstransitions'); 
    } 
}); 

Answer 1

Мобильный нав всегда кажется, не в состоянии после первый клик. После отладки кажется, что вы удаляете меню и повторно добавляете его, но события щелчка не подключаются после.

В частности, эта часть не кажется, увольняют снова:

$('.cd-nav-trigger').on('click',......