0
私は、ユーザーがスクロールするときに、追加のスタイリングでロードするときに白い色に変更するような、固定されたナビを持っています。jQuery .addClassと.removeClassで動作しないCSSトランスフォーム
トランスフォームCSSの要素に問題があります。私が探しているように、それはアニメートしません。 Slackからこのnavの同じスタイルを複製したいと思います。 https://slack.com/customers
私は以下のjQueryとCSSを持っています。
nav.top {
position: fixed;
top: 0;
width: 100%;
height: 70px;
z-index: 99;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.fixed {
-webkit-transform: translate3d(0,-80px,0);
-moz-transform: translate3d(0,-80px,0);
-ms-transform: translate3d(0,-80px,0);
transform: translate3d(0,-80px,0);
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
nav.top ul {
list-style-type: none;
margin: 0 20px 0 0;
padding: 0;
float: right;
line-height: 4.375rem;
}
nav.top ul li {
display: inline-block;
}
nav.top ul a.btn_sticky {
color: #404B55;
box-shadow: inset 0 0 0 2px #404b55;
}
nav.top ul a {
color: #404B55;
text-decoration: none;
display: inline-block;
font-size: .9375rem;
font-weight: 700;
margin-left: 9px;
position: relative;
cursor: pointer;
line-height: 1em;
padding: 8px 7px 9px;
border-radius: 5px;
opacity: .8;
}