Как правильно сделать меню так чтобы она при прокрутке прилипала к верхней части экрана?

Question

[Alex ALex]

Хочу что бы при прокрутке сайта меню не исчезало а прилипло.. Как правильно все оформить и какое решение актуально?

Answer 1

[Сергей delphinpro]

<div class="fixed-bar">...</div>

.fixed-bar {
  transition: 0.7s ease;
  transition-property: transform, box-shadow;
  height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  transform: translateY(-100%);
}

.fixed-bar.isShown {
  box-shadow: 0 0 10px black;
  transform: translateY(0);
}

const fixedBar = document.querySelector('.fixed-bar');

const toggleBar = function () {
  let isShown = window.pageYOffset > window.innerHeight / 2;
  fixedBar.classList.toggle('isShown', isShown);
}

toggleBar();
window.addEventListener('scroll', toggleBar);

Демо:

Comments

[Alex ALex]

Я попробовал увы не получилось((( можете в по подробнее объяснить?

[Сергей delphinpro]

Alex ALex, Что там может не получиться? Я полностью готовый код дал, копируй и вставляй...
Добавил дёмку в ответ.

[Alex ALex]

Сергей delphinpro, Спасибо большое у меня опять такая проблема хотел сделать так чтоб она не скрывалась в начале и при прокрутке прилипала наверху и еще у меня есть sеction и я на них указал width 100% и height 100vh и меню отодвигает секцию вниз и при прокрутке сделал так как вы а как решить такую проблему? я наверное смог вам объяснить.. Меню я вынес с секции с начало меню потом секции..

[Alex ALex]

у меня меню при скроле прилипает и отодвигает секцию внизи сайт криво отображается((

[Сергей delphinpro]

Alex ALex, там где меню должно быть, вставляйте заглушку такой же высоты, когда меню прилипает. или margin-top у следующего блока.

[Сергей delphinpro]

Если у вас меню всегда находится вверху, то js вам не нужен. просто сделайте его всегда фиксированным.
Прилипание делают, когда меню находится, например, ниже шапки, и оно прилипает, когда скроллится до верхней кромки.

[Alex ALex]

Сергей delphinpro, Понятно а вот фиксировать смог как то но при скроле у меня секцию отталкивает меню((( как сделать так чтоб при скроле меню была тогда фиксированной а секции по ширине и по высоте по 100% были по всему экрану может z-index задать для блока меню?

Answer 2

[Евгений]

position: fixed

Comments

[Alex ALex]

А как с помощью js сделать?

Answer 3

[forspamonly2]

position: sticky

Comments

[Сергей delphinpro]

ну какой, нафиг стик? https://caniuse.com/#feat=css-sticky
рано еще

[forspamonly2]

Сергей delphinpro, а чего смутило-то? автор вопроса своё меню, наверное, не таблицей верстает.

[Alex ALex]

forspamonly2, Не с таблицами а тегами ul>li>a

[forspamonly2]

ну значит слово "рано" в вашем случае совсем не подходит.

обновляющиеся (evergreen) браузеры это уже все умеют (за исключением некоторых вещей в таблицах), а необновляющиеся и не будут. если без ие никак, на том caniuse во вкладке resources есть полифилл.

актуальное решение для актуальных браузеров и типовой костыль для неактуальных.

[Alex ALex]

forspamonly2, И что вы предлагаете?Хорошо вот я сейчас делаю адаптивку а про крос бравурность я не подумал(((