0

.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> 
    <script>
        window.onscroll = function showNavbar() {
            var navbar = document.querySelector('.navbar_fixed');
            if(window.pageXOffset > 200) {
                navbar.classList.add('navbar_fixed');
            }
        }
    </script>

1 ответ 1

1

Планировалось что-то вроде такого?

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> 

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.