Тень под фиксированным заголовком при прокрутке

Question

Я создаю веб-сайт, и мне нужна тень под моим фиксированным заголовком при прокрутке. Это означает, что когда сайт загружается, под заголовком нет тени, но когда я прокручиваю страницу, тень должна появляться под заголовком. Вот мой css код

EDIT: я использую reactjs для рендеринга заголовка

.nav-heading {
  background-color: $white;
  top: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  width: 100%;
  z-index: 1;
  // margin-top: 1.25rem;
}
.nav-heading::after {
  position: fixed;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.7);
}

Answer 1

Вы можете использовать JQuery, то есть javascript lib.

Сначала вам нужно установить JQuery. Один простой способ - использовать CDN.

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Затем добавьте свой скрипт следующим образом.

<script>
  $(window).scroll(function(){
    $(".nav-heading").css("box-shadow","here insert the value you want for the box-shadow")
  })
</script>

Если вы хотите, чтобы тень исчезла после прокрутки, вы можете использовать:

<script>
  $(window).scroll(function(){
    $(".nav-heading").css("box-shadow","here insert the value you want for the box-shadow").fadeOut( "slow" );
  })
</script>

Подробнее о: https://code.jquery.com/

Изменить: Как использовать React. js

Вы можете создать функции для работы с состоянием прокрутки или нет.

   constructor() {
     super();
     this.state = {
        className: 'notShadow'
     }
   }

   handleScroll() { 
    if (document.documentElement.scrollTop > 430) {
       this.setState({
         className: 'withShadow'
       })
     } 
   }
 
   componentDidMount() {
     window.onscroll = () => this.handleScroll()
   }

А затем внутри заголовка вы можете вызвать состояние как класс.

<Nav className={this.state.className} />

Если вы не знаете количество пикселей, которые вы можете использовать:

console.log(document.documentElement.scrollTop);