Липкая панель навигации без JavaScript

Вы когда-нибудь хотели создать липкое меню, но без необходимости писать для него дополнительный JavaScript? CSS поможет вам теперь!

Ключом к успеху является свойство position: sticky. И несмотря на то, что он помечен как «частичная поддержка» для большинства браузеров, он работает довольно хорошо. «Частичное» связано с тем, что некоторые браузеры неправильно обрабатывают это свойство в некоторых настройках таблицы. Если вы не используете таблицы и не хотите, чтобы там была какая-то липкость, все в порядке.

Вот мое изменение кода на моем личном сайте:

До

JavaScript

const navbar = document.querySelector('.navbar');
let sticky = navbar.offsetTop;
const navbarScroll = () => {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add('sticky')
  } else {
    navbar.classList.remove('sticky');
  }
};
window.onscroll = navbarScroll;

Таблица стилей

.navbar {
  position: relative;
}
.sticky {
  position: fixed;
  top: 0;
  left: 0;
}

После

JavaScript

// nope

Таблица стилей

.navbar {
  position: sticky;
  top: 0; /* it does not reposition right away,
             but determines at which point it sticks */
}

Как говорится в комментарии, вам понадобится top, чтобы сказать, куда вставить элемент после прокрутки к нему. Значение: до тех пор, пока вы не прокрутите полосу вверх до нуля в текущем представлении, она будет продолжать прокручиваться вверх. После этого остается там.

Не проверено, но это может работать и во всех других направлениях. Кто-то хочет нижнюю планку? ;-)

Вывод

Я думаю, что 2 строки CSS лучше, чем несколько в CSS и JS.

Чего пока нет, так это способа применить другой стиль, когда он застрял или нет, поскольку для этого нет селектора CSS. Не знаю, придет ли это когда-нибудь, но можно надеяться.

Я недавно писал об этом и об использовании JS в целом в своей статье Как я написал JavaScript, чтобы избежать JavaScript — не волнуйтесь, вам не нужно все выбрасывать, как это сделал я. Но я хочу дать вам пищу для размышлений. Может быть, вы понимаете, что решили свои проблемы с помощью слишком большого количества JS.

Также ознакомьтесь со спецификациями и разработками стандартов HTML и CSS, всегда можно найти что-то интересное. Одним из самых больших изменений за последние годы были флексбоксы и сетки, я думаю, многие веб-дизайнеры приветствовали эти дополнения.

Первоначально опубликовано на https://dev.to 14 октября 2020 г.