Как закрепить меню при скроле?

Question

делаю копию тильдовского сайта на вордпрессе. Возникла сложность. В оригинальном сайте, меню фиксируется к верхней части браузера, при скроллинге. Вот: https://ninjamail.click/ На странице над которой работаю, пока такого нет. Вот: https://page.ninjamail.click/bbd90894-b711-4d53-b1cf-486c29b83971/

Как можно на второй странице сделать точно такой же скроллинг? Не через css fixed, а чтобы меню закреплялось при прокрутке на определённое колличество пикселей, как в первом сайте?

Спасибо всем, кто поможет.

Answer 1

В общем виде можно сделать как-то так:

$(window).on('scroll',function(){
  if($(this).scrollTop() >= 200) {
    $('nav').css({'position':'fixed','top':0});
  }
  else {
    $('nav').css({'position':'static','top':'-100%'});
  }
});

* {
  margin: 0;
  box-sizing: border-box;
}
nav {
  transition: .5s;
  top: -100%;
  width: 100%;
  background-color: blue;
  color: white;
  padding: 30px;
  text-align: center;
}
.block {
  color: white;
  padding: 250px 50px;
}
.block:nth-of-type(1) {
  background-color: red;
}
.block:nth-of-type(2) {
  background-color: green;
}
.block:nth-of-type(3) {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>Панель навигации</nav>
<div class="block">блок 1</div>
<div class="block">блок 2</div>
<div class="block">блок 3</div>

БЛОГ НА HUSL

Как закрепить меню при скроле?

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