JSFiddle - React, Tailwind, and code Playground

by CTR99

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<header class="sticky-top site-header">
<nav class="navbar sticky-top">
  <div class="container">
	  
  <a class="" href="#">Каталог</a>
  <a class="" href="#">Наша философия</a>
  <a class="" href="#">Блог</a>
  <a class="" href="#">Доставка</a>
   <a class="" href="#">Контакты</a>
   <a class="" href="#">Корзина</a>
  </div>
</nav>	 
</header>

<div class="bg-print">
  <div class="text-center my-5">
      <h1>Рассказываем, как исправить баг</h1>
  <a href="https://ctr99.ru/">ctr99.ru</a>
  </div>
</div>

<div class="row my-5">
  <div class="col-sm-6">
    <div class="card">
      Тест1
    </div>
   </div>
    <div class="col-sm-6">
     <div class="card">
      Тест2
    </div>
  </div>
</div>

<div class="row my-5">
  <div class="col-sm-6">
    <div class="card">
      Тест1
    </div>
   </div>
    <div class="col-sm-6">
     <div class="card">
      Тест2
    </div>
  </div>
</div>

<div class="row my-5">
  <div class="col-sm-6">
    <div class="card">
      Тест1
    </div>
   </div>
    <div class="col-sm-6">
     <div class="card">
      Тест2
    </div>
  </div>
</div>


<div class="row my-5">
  <div class="col-sm-6">
    <div class="card">
      Тест1
    </div>
   </div>
    <div class="col-sm-6">
     <div class="card">
      Тест2
    </div>
  </div>
</div>

<div class="row my-5">
  <div class="col-sm-6">
    <div class="card">
      Тест1
    </div>
   </div>
    <div class="col-sm-6">
     <div class="card">
      Тест2
    </div>
  </div>
</div>

<div class="row my-5">
  <div class="col-sm-6">
    <div class="card">
      Тест1
    </div>
   </div>
    <div class="col-sm-6">
     <div class="card">
      Тест2
    </div>
  </div>
</div>

CSS

body {

  background: white;

}

header {
  padding: 10px;
}

nav.navbar {
  background-color: transparent;
}

nav.navbar a {
  color: white;
}

div.card {
  border: 1px solid black;
  padding: 20px;
}

div.bg-print {
  background-image: url(https://ctr99.ru/local/templates/main/assets/img/sun-tornado.svg);
  background-size: cover;
  min-height: 300px;
  color: white;
  margin-top: -100px;
  padding: 100px 0 0 20px;
}

div.bg-print a {
  color: white;
  text-decoration: none;
}

JavaScript

/*Исправление бага с меню
https://ctr99.ru/
*/

window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset;
  const headerElement = document.querySelector('.site-header');
	console.log(headerElement);

	if (scrollTop > 0) {
		if (window.innerWidth > 768) { //на разрешении меньше 768 отображается нормально
			headerElement.style.backgroundColor = '#2d2d2d';
			headerElement.style.padding = '10px';
			headerElement.style.color = '#fff';		
		} 
	} else {
		if (window.innerWidth > 768) {
			headerElement.style.background = 'none';
			headerElement.style.padding = 'none';
			headerElement.style.color = ''; 
		}
	}  
});