CSS动画在返回前丢弃

我想要一个导航栏，其中的导航项目被拉起，并且随着用户滚动并回滚，用户滚动并缩回标志。CSS动画在返回前丢弃

，但目前的导航项目上前下拉......当它恢复它在不同的点结束了......

HTML：

<nav class="navbar"> 
<a href="#">James Jones</a> 
    <ul class="nav-items"> 
    <li><a href="#about">About</a></li> 
    <li><a href="#">Work</a></li> 
    <li><a href="#">Photography</a></li> 
    <li><a href="#">Videos</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

CSS：

.navbar { 
    background: #fff; 
    font-family: ShorelinesScriptBold; 
    font-size: 2em; 
    font-weight: 900; 
    height: 150px; 
    line-height: 100px; 
    position: fixed; 
    text-align: center; 
    -webkit-transition: all 1.0s ease; 
    transition: all 1.0s ease; 
    width: 100%; 
    z-index: 10000; 
} 

.navbar a { 
    color: #343434; 
    display: block; 
    /*margin: 0 0 -24px 0;*/ 
    margin: 0 0 -55px 0; 
    text-decoration: none; 
} 

.navbar a:hover { 
    color: #343434; 
    text-decoration: none; 
} 

.shrink { 
    font-family: 'Radley', serif; 
    font-size: 1em; 
    font-weight: 500; 
    height: 50px; 
    letter-spacing: 1px; 
    line-height: 50px; 
    position: fixed; 
    top: -5px; 
    text-transform: uppercase; 
} 

.nav-items { 
    background: #fff; 
    -webkit-transition: all 1.0s ease; 
    transition: all 1.0s ease; 
} 

.nav-items li { 
    display: inline-block; 
    font-family: Helvetica; 
    font-size: 12px; 
    letter-spacing: 0; 
    text-transform: uppercase; 
} 

.nav-items a { 
    color: gray; 
    font-weight: 300; 
    margin: 0 15px; 
    text-decoration: none; 
} 

.nav-items a:hover { 
    color: #FFAED8; 
} 

.margin { 
    margin: 30px 0 0 0; 
}

的Javascript：

$(window).scroll(function() { 
    if ($(document).scrollTop() > 150) { 
    $('.navbar').addClass('shrink'); 
    $('.nav-items').addClass('margin'); 
    } else { 
    $('.navbar').removeClass('shrink'); 
    $('.nav-items').addClass('margin'); 
    } 
});

JS FIDDLE：

https://jsfiddle.net/gkrtk8s3/4/

来源

2015-12-24 James

也...它的行为mor e就像我想在jsfiddle上的方式...但在本地它的行为不同（使用铬） – James

当我向下滚动...导航项目有点第一... ，当我向后滚动... ...导航项停留在原点，然后稍微下降 – James

您是否想要运行'$（'。nav-items'）.addClass（'margin'）;'两次？ – Blazemonger

为什么你遇到你的菜单栏上冒泡运动是因为你有

.nav-items { 
    background: #fff; 
    -webkit-transition: all 1.0s ease;/* Duplicate Transition. you already have a transition on your nav tag 
    transition: all 1.0s ease; /* Duplicate Transition. you already have a transition on your nav tag 
}

取出两条线-webkit-transition: all 1.0s ease和transition: all 1.0s ease;从上面

的原因

注意：在铬版本中测试版本46.0.2490.71

来源

2015-12-25 01:02:25 repzero

CSS动画在返回前丢弃

回答

相关问题