Не появляется тень у блока при скролле страницы

Question

Почему то не появляется тень при прокрутке

$(window).scroll(function() {
  $('header').toggleClass('scroll', $(this).scrollTop() > 63);
});

body {
  height: 1200px;
}

.header {
  position: fixed;
  display: flex;
  width: 100%;
  height: 63px;
  left: 0px;
  top: 0px;
  background: #FFFFFF;
}

.scroll {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
  <header>
    <div class="header">
    </div>
  </header>
</body>

Answer 1

Потому что Вы в скрипте обращаетесь к тегу header, а стили прописали для класса .header - вот и не отрабатывает:

$(window).scroll(function() {
  $('.header').toggleClass('scroll', $(this).scrollTop() > 63);
});

body {
  height: 1200px;
}

.header {
  position: fixed;
  display: flex;
  width: 100%;
  height: 63px;
  left: 0px;
  top: 0px;
  background: #FFFFFF;
}

.scroll {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <header>
    <div class="header">
    </div>
  </header>
</body>

БЛОГ НА HUSL

Не появляется тень у блока при скролле страницы

Ответы (1 шт):