Планировалось что-то вроде такого?
var navbar = document.querySelector('.navbar');
window.addEventListener('scroll',function(){
if(pageYOffset > 200) {
navbar.classList.add('navbar_fixed');
}else{
navbar.classList.remove('navbar_fixed');
}
})
body{
min-height: 200vh;
}
.navbar {
width: 100%;
background: #D10000;
}
.navbar_fixed{
position: fixed;
background: #FFFFFF;
top: 0;
left: 0;
animation-name: shownavbar;
animation-direction: 1s;
}
@keyframes shownavbar {
0%{
opacity: 0;
top:-70px;
}
100%{
opacity: 1;
top: 0;
}
}
<div class="navbar">
<div class="string">
<a href="#" class="c1">
<div class="c-icon"></div>
<div class="menu">
<span class="catalog">Каталог</span>
</div>
</a>
<a href="#" class="b1">
<div class="b-icon"></div>
<div class="menu">
<span class="bonus">Бонусы</span>
</div>
</a>
<a href="#" class="a1">
<div class="a-icon"></div>
<div class="menu">
<span class="stocks">Акции</span>
</div>
</a>
<a href="#" class="m1">
<div class="m-icon"></div>
<div class="menu">
<span class="shops">Магазины</span>
</div>
</a>
<a href="#" class="d1">
<div class="d-icon"></div>
<div class="menu">
<span class="delivery">Доставка</span>
</div>
</a>
</div>
</div>