0
いいえ、ajaxを読み込んだ後にモバイルナビゲーションの起動に問題があります。このメニューは、Ajaxを読み込んでいないときに最適です。ページが最初に読み込まれると、メニューは機能しますが、リンクをクリックして新しいページコンテンツを読み込んだ後は、クリックするとメニューが開きません。 （コンソールに表示されるエラーはありません）Ajaxのロード後にモバイルナビゲーションが機能しなくなる
ブラウザでhtmlコードを調べると、何らかの理由でをロードした後に気付いたことがあります。 nav-triggerこれはナビゲーションを明らかにするものです。
私はJavaScriptが何かを修正する必要があると感じていますが、何が壊れているのか正確にはわかりません。 （app.jsを理解するために、最初にページのスクリプトを実行してから、ajaxをロードした後にスクリプトを再実行してください。すべてのスクリプトが正しく実行されており、ナビの問題です。）
誰でも私に教えてくれれば助かります。
ページテンプレート：（内容はAjaxで置き換えられますものです）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css">
<link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
<script src="https://use.typekit.net/xps0dil.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script src="/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container">
{% include header.html %}
<div id="content">
{{ content }}
</div>
{% include social.html %}
</div>
{% include footer.html %}
</body>
</html>
ナビゲーションHTML：
<header class="cd-auto-hide-header">
<div class="logo">
<a href="/" class="page-link" title="home"><img src="/img/logo.svg" alt="logo" /></a>
</div>
<nav class="cd-primary-nav">
<div href="#cd-navigation" class="nav-trigger">
<span class="cd-nav-icon"></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" stroke="#fff" stroke-width="2" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
</svg>
</div>
<div class="cd-navigation-wrapper">
<ul id="cd-navigation">
<li><a href="/work" class="page-link" title="work">Work</a></li>
<li><a href="/services" class="page-link" title="services">Services</a></li>
<li><a href="/agency" class="page-link" title="agency">Agency</a></li>
<li><a href="/culture" class="page-link" title="culture">Culture</a></li>
<li><a href="/blog" class="page-link" title="blog">Blog</a></li>
<li><a href="/contact" class="page-link" title="contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
SCSS：
.cd-auto-hide-header {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100vw;
height: $nav-height;
background-color: #fff;
@include clearfix;
/* Force Hardware Acceleration */
transform: translateZ(0);
@include transition(transform .5s);
&.is-hidden {
transform: translateY(-100%);
}
@include media($tablet) {
height: $nav-height;
padding: 0;
}
@include media($desktop) {
padding: 0 75px;
}
@include media($desktop-large) {
padding: 0 100px;
}
@include media($desktop-largest) {
padding: 0 200px;
}
@include media($desktop-super) {
padding: 0 300px;
}
@include media($desktop) {
height: $nav-height;
}
}
.cd-auto-hide-header .logo {
position: absolute;
@include center(y);
margin-left: 5%;
@include media($desktop) {
margin-left: 0;
}
}
.logo {
z-index: 0;
img {
width: 80px;
}
}
.cd-auto-hide-header .logo {
a,
img {
display: inline-block;
}
}
.cd-auto-hide-header .nav-trigger {
/* vertically align its content */
span {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
}
em,
em::after,
em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
backface-visibility: hidden;
}
em {
/* this is the menu central line */
margin: 6px auto 14px;
transition: background-color 0.2s;
}
em::after,
em::before {
position: absolute;
content: '';
left: 0;
transition: transform 0.2s;
}
em::before {
/* this is the menu icon top line */
transform: translateY(-6px);
}
em::after {
/* this is the menu icon bottom line */
transform: translateY(6px);
}
@include media($desktop) {
display: none;
}
}
.cd-auto-hide-header.nav-open .nav-trigger {
em {
/* transform menu icon into a 'X' icon */
background-color: rgba(0,0,0, 0);
}
em::before {
/* rotate top line */
transform: rotate(-45deg);
}
em::after {
/* rotate bottom line */
transform: rotate(45deg);
}
}
.nav-trigger {
position: fixed;
z-index:1000;
right: 5%;
top: 40px;
height: 54px;
width: 54px;
background-color: #000;
border-radius: 50%;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
@include transition(transform .7s - 0.2s);
cursor:pointer;
.cd-nav-icon {
/* icon created in CSS */
position: absolute;
@include center; // mixin inside partials > _mixins.scss
width: 22px;
height: 2px;
background-color: #fff;
&::before,
&:after {
/* upper and lower lines of the menu icon */
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: inherit;
/* Force Hardware Acceleration in WebKit */
@include transform(translateZ(0));
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
@include transition(transform .7s - 0.2s, width .7s - 0.2s, top .3s);
}
&::before {
@include transform-origin(right top);
@include transform(translateY(-6px));
}
&::after {
@include transform-origin(right bottom);
@include transform(translateY(6px));
}
}
.no-touch &:hover .cd-nav-icon::after {
top: 2px;
}
.no-touch &:hover .cd-nav-icon::before {
top: -2px;
}
svg {
position: absolute;
top: 0;
left: 0;
}
circle {
/* circle border animation */
@include transition(stroke-dashoffset .7s - 0.3s 0s);
}
.nav-open & {
/* rotate trigger when navigation becomes visible */
@include transform(rotate(360deg));
background:#92062b;
@include transition(background .7s);
.cd-nav-icon::after,
.cd-nav-icon::before {
/* animate arrow --> from hamburger to arrow */
width: 50%;
@include transition(transform .7s - 0.2s, width .7s - 0.2s);
}
.cd-nav-icon::before {
@include transform(rotate(45deg));
}
.cd-nav-icon::after {
@include transform(rotate(-45deg));
}
.no-touch &:hover .cd-nav-icon::after,
.no-touch &:hover .cd-nav-icon::before {
top: 0;
}
circle {
stroke-dashoffset: 0;
@include transition(stroke-dashoffset .7s - 0.3s 0.3s);
}
}
}
.cd-primary-nav {
display: block;
float: right;
height: 100%;
@include transition(visibility 0s .7s);
.cd-navigation-wrapper {
height: 100vh;
width: 100vw;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index:100;
/* Force Hardware Acceleration in WebKit */
@include transform(translateZ(0));
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
@include transform(translateX(100%));
@include transition(transform .7s - 0.2s);
@include transition-timing-function(cubic-bezier(.82,.01,.77,.78));
@include media($desktop) {
height: $nav-height;
width: 100%;
@include transform(translateX(100%));
}
> ul {
z-index:1000;
left: 0;
width: 100%;
margin-right: 0;
background: $brand-color;
height: 100vh;
padding-top:40px;
position:absolute;
a {
/* target primary-nav links */
display: inline-block;
height: 10vh;
line-height: 2em;
padding-left: 1em;
font-size: 2em;
text-decoration: none;
color: #fff;
&.active,
&:hover {
color: #101010;
}
}
}
@include media($desktop) {
/* vertically align its content */
display: table;
> ul {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
/* reset mobile style */
position: relative;
width: auto;
top: 0;
padding: 0;
@include clearfix;
background-color: transparent;
box-shadow: none;
height: $nav-height;
@include transform(translateX(-100%));
@include transition(transform .7s - 0.2s);
li {
display: table-cell;
vertical-align: middle;
float: left;
&:last-of-type {
margin-right: 0;
}
}
a {
/* reset mobile style */
display: block;
border: 0;
height: 50px;
line-height: .75em;
padding: 20px 20px 0;
text-decoration: none;
color: #000;
font-size: 1.2em;
font-weight: $nav-font-weight;
@include media($desktop-largest) {
font-size: 1.4em;
}
@include media($desktop-super) {
font-size: 1.5em;
}
}
a:hover {
color: #000;
}
a::after {
position: relative;
bottom: 0;
left: 50%;
display: inline-block;
width: 0;
height: 2px;
content: "";
transition: width 0.3s ease 0s, left 0.3s ease 0s;
background: $dark-gray;
}
a:hover::after {
position: relative;
left: 0;
width: 100%;
}
}
}
}
.nav-open & {
visibility: visible;
@include transition(visibility 0s 0s);
.cd-navigation-wrapper {
@include transform(translateX(0));
@include transition(transform .7s - 0.2s);
@include transition-timing-function(cubic-bezier(.82,.01,.77,.78));
}
}
}
.cd-primary-nav ul:target,
.nav-open .cd-primary-nav ul {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
@include media($desktop) {
display: table-cell;
}
}
.no-js main {
height: auto;
overflow: visible;
}
.no-js .cd-nav {
position: static;
visibility: visible;
.cd-navigation-wrapper {
height: auto;
overflow: visible;
padding: 100px 5%;
@include transform(translateX(0));
}
}
app.js
$(function() {
init = function() {
runScripts();
},
ajaxLoad = function(html) {
init();
$("body").scrollTop(0);
};
init();
//Function that loads in the new content
var load = function(url) {
$("#content").load(url + " #content");
};
$(document).on('click', 'a', function(e) {
e.preventDefault();
//Sets variables to be used for url and page name
var $this = $(this),
url = $this.attr("href"),
title = $this.text();
//Makes entries into browser history
history.pushState({
url: url,
title: title
}, title, url);
document.title = title;
load(url);
});
$(document).ajaxComplete(function() {
console.log("Ajax Loaded");
ajaxLoad();
});
//Enables use of back and forward buttons in browser
$(window).on('popstate', function(e) {
var state = e.originalEvent.state;
if (state !== null) {
document.title = state.title;
load(state.url);
} else {
document.title = title;
$("#content").empty();
}
});
// Need to reinitialize scripts so they run when page is loaded
function runScripts() {
navigation();
function navigation() {
console.log("Navigation script running");
var mainHeader = $('.cd-auto-hide-header'),
secondaryNavigation = $('.cd-secondary-nav'),
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;
});
}
});
mainHeader.on('click', 'a', function(event) {
if (mainHeader.hasClass("nav-open")) {
mainHeader.toggleClass('nav-open');
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');
}
}
};
};
});
ハンドラが関連付けられているmainHeaderを置き換える可能性が高いので、イベントハンドラを本体または変更されない別の要素に委任してみてください。 '$（" body "）のようなものon（ 'click'、 '.nav-trigger'、function（event）{...}）;'あるいは、イベントハンドラを手動でmainHeaderに再接続します。 – Shilly
@ Shilly申し訳ありませんが、私は完全なページのHTMLを追加する必要があります、私は含める質問を更新しました。ナビゲーション・コンテナは、ajaxがロードされたときに置換されていないため、mainHeader要素は変更しないでください。 –
各Ajaxロードで同じバインディングを再適用しているようです。ナビゲーションをリロードしないと、イベントをリビルドする必要はありません。実際には、トグルを2回バインディングしているため、ナビゲーションは偶数回のajaxコールの後にのみ機能し、奇数回のコール後は機能しません。 ***イベントは、すべてのページ***ではなく、新しくロードされたコンテンツにのみマップする必要があります。あなたの現在のスクリプトを考えると、それは簡単な作業ではありません。 –