1

Есть хедер и контент, при скроллинге хедер становится фиксированным, а контент нужно сдвинуть вниз на высоту хедера. Пытался сделать по примеру - там в песочнице все получалось, скопировал, вставил, изменил переменные - не работает, пишет ошибку в getBoundingClientRect(). Вот мой упрощённый код:

var header = $('#header');
var heightHeader = header.outerHeight(true);

window.onscroll = function() {
  if (window.pageYOffset == 0) {
    $('#header').css({
      left: 0,
      right: 0,
      top: 0,
      position: 'relative'
    });
    $('#content').css({
      "margin-top": "0"
    });
  } else {
    $('#header').css({
      left: 0,
      right: 0,
      top: 0,
      position: 'fixed'
    })
    $('#content').css({
      "margin-top": heightHeader + "px"
    });
  }
};
#header {
  height: 300px;
  background: #bbb;
}

#content {
  height: 900px;
  background: #444;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="content"></div>

Все сделал, всем спасибо!))

1 ответ 1

1

var header = $('#header');
var heightHeader = header.height;


window.onscroll = function() {
  if (window.pageYOffset == 0) {
    $('#header').css({
      left: 0,
      right: 0,
      top: 0,
      position: 'relative'
    });
    $('#content').css({
      "margin-top": "0"
    });
  } else {
    $('#header').css({
      left: 0,
      right: 0,
      top: 0,
      position: 'fixed'
    })
    $('#content').css({
      "margin-top": parseInt($('#header').css('height')) + 100
    });
  }
};
#header {
  height: 300px;
  background: #bbb;
}

#content {
  height: 900px;
  background: #444;
  color: #fff;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">header</div>
<div id="content">content</div>

Ваш ответ

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

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