Как лучше реализовать sticky-header?

Question

[Anton A]

Добрый день.

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

При fixed:0 обрезается хедер при горизонтальном скроле страницы.
position: sticky не поддерживается в ие11

Остается только position:absolute и при скроле через js менять позицию хедера ?

Comments

[Gennady S]

Думаю, в разумных пределах поддержку IE11 можно исключить, смело используйте position: sticky и другие вещи, предварительно проверив, чтобы отображение сильно не ломалось. Во-первых, доля пользователей IE мала и продолжает падать, во-вторых, скоро он будет полностью мертв, а Ваш проект будет жить, возможно, без рефакторинга.

[Ankhena]

При fixed:0 обрезается хедер при горизонтальном скроле страницы.

Не должно быть горизонтального скролла.

Покажите в песочнице, что именно обрезается.
В простой ситуации не должно.

Answer 1

[Евгений Щербаков]

А что у вас обрезается при fixed?

<div class="header">some header</div>
<div class="body">lorem1000</div>

.header {
  height: 50px;
  background-color: lightblue;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.body {
  padding-top: 50px;
  width: 150%;
}

lorem1000 - это куча текста, чтобы сделать скролл

Comments

[Ankhena]

И где у вас горизонтальный скролл?

[Евгений Щербаков]

Прошу прощения, добавил 150% для ширины тела