当您调整窗口大小时，主导航应该在767px处消失但在770px左右消失。
在HTML代码中，如果您完全删除该部分，则会对此异常行为发表评论，然后代码才能正常运行。
javascript文件是我在js文件中放置注释的主要文件，问题似乎在这里。
使输出窗口大小为满，然后慢慢调整大小，然后主菜单将在实际断点之前消失。 https://jsfiddle.net/h8vtbxjx/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="queries.css">
</head>
<body>
<div id="outer-background">
<div class="container inner-background">
<header>
<nav>
<a href="#"><img src="css/img/logo.png" class="logo" alt="logo"></a>
<a href="#"><img src="css/img/logo-sticky.png" class="logo-black" alt="logo"></a>
<ul class="main-nav js--main-nav">
<li><a href="http://google.com">Home</a></li>
<li><a href="#explore">Explore</a></li>
<li><a href="#">Add A Post</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</nav>
<h1 class="ion-android-share-alt"> Share with the world</h1>
</header>
<!--Unusual behavior if you remove the below section completely then the code works fine -->
<section class="blog-index js--blog-index" id="explore">
<h2 class="fancy-heading">Explore</h2>
<div class="row">
<div class="col span-1-of-3 img-border">
<figure class="tile-photo">
<h3 class="index-post-title">This is Post</h3>
<img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="Paleo steak with vegetables">
<figcaption class="index-post-content">This is A post</figcaption>
<a href="#" class="btn">Read More</a>
</figure>
</div>
</div>
</section>
</div> <!-- container -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="script.js"></script>
</body>
</html>
导航用Css
header {
height: 240px;
}
header h1 {
padding-top: 150px;
text-align: center;
text-transform: uppercase;
word-spacing: 10px;
color: rgba(240, 238, 238, 0.67);
font-size: 160%;
line-height: 145%;
color: rgb(19, 109, 128);
}
/***************** MAIN NAV *****************/
.main-nav {
float: right;
list-style: none;
margin-top: 15px;
margin-right: 26px;
}
.main-nav li {
display: inline-block;
margin-right: 22px;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav li a {
text-decoration: none;
text-transform: uppercase;
color: rgb(19, 109, 128);
word-spacing: 2px;
font-size: 81%;
font-weight: 400;
letter-spacing: 1px;
}
/*********** STICKY NAV **************/
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 2px rgba(25, 147, 177, 0.31);
z-index: 9999;
}
.sticky .logo { display: none; }
.sticky .logo-black { display: inline-block; }
/************ MOBILE NAV ************/
.mobile-nav-icon {
padding-top: 20px;
padding-left: 40px;
cursor: pointer;
float: right;
margin-right: 20px;
display: none;
}
.mobile-nav-icon i {
font-size: 150%;
color: #d3d3d3;
}
媒体查询
/* Small tablets to large tablets 768px TO 1023px */
@media only screen and (max-width: 1023px) {
}
/*Small phones to small tablets 481 to 767px */
@media only screen and (max-width: 767px) {
.main-nav { display: none; }
.mobile-nav-icon {
display: inline-block;
position: relative;
z-index: 9999;
}
.mobile-nav-icon i { color: #a29e9e; }
.main-nav {
float: none;
position: absolute;
z-index: 8888;
width: 100%;
height: 100vh;
margin: 0;
margin-left: -2%;
background-color: rgba(14, 116, 129, 0.95);
text-align: center;
padding-top: 20vh;
}
.main-nav li {
display: block;
margin-left: 0;
font-size: 110%;
}
.main-nav li a:link,
.main-nav li a:visited {
display: block;
border: 0;
padding: 10px 0;
font-size: 100%;
color: #363535;
}
.logo {
margin-left: 10px;
}
}
/* Small phones from 0 to 480px */
@media only screen and (max-width: 480px) {
.logo {
height: 70px;
width: auto;
margin-left: 10px;
margin-top: 5px;
}
.logo-black {
margin-left: 8px;
margin-top: 5px;
}
.footer-icons {
float: left;
margin-left: 16px;
}
footer p {
font-size: 90%;
}
}
的Javascript
$('.js--blog-index').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
//Mobile nav
$('.js--nav-icon, .js--main-nav a, .logo-black').click(function(element){
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
//Gets the class name of the element that triggered the event
var clicked = element.target.className;
//Exists the function if the menu is closed AND the logo-black element (logo image) was clicked
if (icon.hasClass('ion-navicon-round') && clicked == 'logo-black')
return;
//Opens and closes the menu
if ($(window).width() < 768){
nav.slideToggle(200);
}
//Changes icon states of the menu button
if (icon.hasClass('ion-navicon-round')) {
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round');
}
});
//if you remove the below code the main nav disappears at the correct point 767px but without this code the main nav will not reappear if you resize the window to more than 767px
$(window).resize(function(){
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
if ($(window).width() > 767){
nav.css("display", "block");
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
nav.css("display", "none");
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round')
}
});