0

Всем доброго времени суток, написал скрипт для плавающего header'a Проблема в том, что когда он становится "Плавающим" он резко перескакивает, когда становится обратно статическим, то опять же вся происходит резко, как это исправить?

window.addEventListener('scroll', function(event) {
  header = document.getElementsByTagName('header');
  var headerStyle = header[0].style;
  if (event.pageY >= 100) {
    headerStyle.position = 'fixed';
    headerStyle.top = '0';
    headerStyle.left = '0';
    headerStyle.width = '100%';
  } else {
    headerStyle.position = 'static';
  }
})
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: red;
  height: 2000px;
}

header {
  background-color: blue;
  height: 100px;
  text-align: center;
  font-size: 60px;
  color: white;
}
<header>header</header>

Пробовал задать transition: 1s; header'у, но это не помогает.

1
  • 1
    Добавьте padding-top для родителя взяв высоту header 17 мар 2018 в 18:04

1 ответ 1

0

Изменение позиционирования с fixed на static не анимируется. А так как у вас оно происходит на высоте 100px - получается скачок. Лучше делать шапку изначально фиксированной, а body задавать padding-top равный высоте шапки(чтобы контент не накрывала).

function headerSpace(){
  var headerHeight = document.querySelector('header').offsetHeight;
  document.body.style.paddingTop = headerHeight + 'px';
}
headerSpace();
window.onresize = headerSpace();
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

body {
  background-color: red;
  height: 2000px;
}

header {
  background-color: blue;
  height: 100px;
  text-align: center;
  font-size: 60px;
  color: white;
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
ol{
  list-style-position:inside;
  padding:0;
}
<header>header</header>
<ol>
  <li>А тут много контента</li>
  <li>А тут много контента</li>
  <li>А тут много контента</li>
  <li>А тут много контента</li>
  <li>А тут много контента</li>
  <li>А тут много контента</li>
</ol>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.