Working JSFiddle

Question

当面板1的底部碰到页面顶部时，我试图在滚动时将导航栏的白色背景和底部边框放入/缩小。但是，切换菜单内的导航正在进行动画。我猜这是因为我把班级“bg navfade”放错了????

CSS：

/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}

a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}

a:focus, a:hover {  
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}

a:active { 
color: #484747; 
}
/*----/----global styles*/

/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}

#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}

#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}

#toggle-menu span.top {
top: 0px;
}

#toggle-menu span.middle {
top: 6px;
}

#toggle-menu span.bottom {
top: 12px;
} 
/*----/----navigation icon*/

/*navigation background transition*/
.bg {
background: #fff;
width: 100%;
left:0;
border-bottom: 0.5px solid rgba(0,0,0,.2);
opacity: 0;
}

.show {
opacity: 0.4;
}

.navfade {    
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.down {
top: 150px;
}

.up {
top: 1800px;
}
/*----/----navigation background transition*/

/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

#toggle-menu.menu-is-active span.middle {
opacity: 0;
}

#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/

/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*background: none;*/
}

.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}

.nav li{
display: inline-block;
padding: 30px;
}

#navigation{
padding-top: 40px;
padding-bottom: 40px;
background: #ffffff;
}

.seemore {
display: inline-block;
padding-right: 20px;
}

#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 10px;
padding-bottom: 10px;
background: #ffffff;
}

#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c; 
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}

#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}

.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
list-style-type: none;
}
/*----/----Nav Bar*/

/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/

/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/

/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}

#panel1 {
background: #b8b8b8;
height: 30em;
}

.links{
color: #adadad;
}

/*----/----Panels*/

/****landscape****/
@media only screen and (max-width: 555px) { 
.nav li{
display: block;
padding: 30px;
}
}
/*----/----Landscape*/

jQuery的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

/*navigation icon animation*/
var trigger='X';

jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
    trigger='X';
    $(this).toggleClass('menu-is-active')

});

/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {


    if (trigger=='X')
    {
      $("#toggle-menu").toggleClass();
      trigger='ham';
    }



});
$("nav").click(function (e) {
    e.stopPropagation();
    return false;
});

/*----/----navigation icon animation*/

/*toggle menu*/
jQuery("#toggle-menu").click(function () {
    jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
    $(".nav").hide();
});
$("#toggle-menu").click(function (e) {
    e.stopPropagation();
    return false;
});
/*----/----toggle menu*/


/*navigation background fade in fade out */
$(window).scroll(function() {

if ($(window).scrollTop() > 100 ){

    $('.bg').addClass('show');

} else {

$('.bg').removeClass('show');

};      
});

$('.scroll').on('click', function(e){       
    e.preventDefault()

$('html, body').animate({
  scrollTop : $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */

});
</script>

HMTL：

<div class="header">

<div class="navbar">


<a href="" class="in" style="display: inline-block;"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
    L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
    C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
    C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>

<a href="" class="logo" style="display: inline-block;">Logo </a>

<a id="toggle-menu">
<div> 
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>

<div class="nav">
<div id="navigation">
<div class="bg navfade"> </div>
<ul>
<li class="navlist"><a href="" style="display: inline-block; width:100%;">Home</a></li>
<li class="navlist"><a href="#panel9" style="display: inline-block; width:100%;">About</a></li>
<li class="navlist"><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li>
<li class="navlist"><a href="#panel8" style="display: inline-block; width:100%;">Contact</a></li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>  
</li><input type='submit' id="instagram" value="instagram"> </li>
</ul>
</div>
</div>



</div>


<div class="maincontent">

<div class="panel" id="panel1">

<div id="hero">
</div>

<div id="scroll">
<span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg></span>

</div>

</div> 

<div class="panel down" id="panel2">
<div class="inner"> 
<a href="" class="links" style="display: inline-block; width:100%;">Work Title 1</a> 
</div>
</div>

<div class="panel" id="panel3">
<div class="inner"> 
<a href="" class="links" style="display: inline-block; width:100%;">Work Title 2</a> 
</div>
</div>

Answer 1

Working JSFiddle

首先，您需要从HTML中删除.navfade和.bg类。

将您的.bg CSS更改为：

CSS

.bg {
    background-color: #fff !important;
    border-bottom: 5px solid rgba(0, 0, 0, 0.2);
}

删除此Javascript

if ($(window).scrollTop() > 100 ) {
    $('.bg').addClass('show');
} 
else {
    $('.bg').removeClass('show');
};

替换为

var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
    $('.header').addClass('bg');
    $('.header').addClass('navfade');
}
else {
    $('.header').removeClass('bg');
}

dist变量计算从页面顶部到面板1部分末尾的距离。这是添加.bg类的最佳时机，适用于任何大小的窗口/浏览器/等。

轻松导致错误位置的导航背景

1 个答案:

Working JSFiddle

CSS

删除此Javascript

替换为