Вытеснение из-под fixed

#javascript #jquery #css

Имеется страница, состоящая из двух основных блоков (.header и .main). У блока .header
установлен position: fixed.

Проблема состоит в том, что блок .main впадает в блок .header. Т.е. заезжает под
блок .header.



body { margin: 5px; }

.header {
  position: fixed;
  left: 5px;
  right: 5px;
  top: 5px;
  height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red,
inset -2px -2px 0px red;
}

.main {
  height: 120px;
  background-color: white;
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px
blue, inset -2px -2px 0px blue;
}








Эту задачу можно решить, добавив ещё один блок такой же высоты, как и .header. Но
это не подойдёт, так как в течении всего времени .header может изменять свою высоту
(с помощью скрипта, изменением ширины и т. д.). При этом .main так же должен оставаться
под .header, а он снова впадёт.



$(function() {
  var $header = $('.header');

  setInterval(function() {
    $header.animate({height: 96 + 'px'}, 400);
      
    setTimeout(function() {
      $header.animate({height: 48 + 'px'}, 400);
    }, 800);
    
    setTimeout(function() {
      $header.css({height: 'auto'}).animate({right: 80 + '%'}, 400);
      
      setTimeout(function() {
        $header.animate({right: 5 + 'px'}, {
          duration: 400,
          complete: function() {
            $header.css({height: 48 + 'px'})
          }
        });
      }, 800);
    }, 2600);
  }, 5200);
});
body { margin: 5px; }

.header {
  position: fixed;
  left: 5px;
  right: 5px;
  top: 5px;
  height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red,
inset -2px -2px 0px red;
}

.main {
  height: 120px;
  background-color: white;
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px
blue, inset -2px -2px 0px blue;
}

.displacer {
  height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px green, inset -2px 2px 0px green, inset 2px -2px 0px
green, inset -2px -2px 0px green;
  visibility: hidden;
}





  

  








В общем, вот:


.header может изменять размер, но при этом, .main всё равно должен
оставаться под ним.
.header должен оставаться на своём месте - сверху страницы с position: fixed


Как решить данный вопрос?
    

Ответы

Ответ 1

Создайте точно такой же элемент только добавьте ему position: static; и visibility:
hidden; (что позволит занимать нужное место, но не отображать элемент).



.a,
.b {
  width: 100%;
  height: 20px;
}

.a {
  background: red;
  position: absolute;
}

.b {
  background: blue;
}

.a-clone {
  position: static;
}


Я не должен быть под красным блоком :с




Те же вещи можно делать и с помощью Javascript и также задавать этому "клону" нужные
margin при необходимости (для соответствующих значений top и left абсолютно позиционированного
элемента).

Обновление

Если содержимое блока будет динамически меняться, то можно с помощью Javascript добавить
обработчик изменения размеров самого блока, где присваивать новые значения размеров
блока "клону" блока со статическим поционированием.


Ответ 2

Обернуть фиксированные блоки обертками.
По событию load брать высоту фиксированных блоков и присваивать ее обертке.
Опционально: при динамическом изменении высоты после загрузки вызывать функцию для
пересчета высоты runHeaders. Чтобы проверить как это работает, разверни на весь экран
и потяни браузер за край.




window.addEventListener('load', runHeaders);
window.addEventListener('resize', runHeaders); // для ресайза лучше обернуть функцией
debounce

function runHeaders() {
  let headers = [].slice.call(document.querySelectorAll('.header')),
      headersF = [].slice.call(document.querySelectorAll('.header__fixed'));
    
  headers.forEach((item, index) => {
    heightSetter(item, headersF[index].offsetHeight);
  });
}

function heightSetter(item, height) {
  item.style.height = height + 'px';
}
*, *:after, *:before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-between;
}

.column {
  flex-basis: calc(25% - 10px);
}

.header {
  position: relative;
}

.header__fixed {
  border: 2px solid;
  padding: 15px;
  position: fixed;
  width: calc(25% - 10px);
  background: #FFF;
}

.main {
  border: 2px solid #CCC;
  padding: 15px;
  min-height: 1000px;
}

  

    

      
And if you're
    

    

  
  

    

      
hurting I will replace the noise
    

    

  
  

    

      
with silence
    

    

  
  

    

      
instead flushing out your head
    

    

  



Ответ 3

Вариант #1:



$('body').css('padding-top', $('.header').outerHeight());
$(window).resize(function() {
 $('body').css('padding-top', $('.header').outerHeight());
});
body {
  margin: 5px;
}

.header {
  position: fixed;
  left: 5px;
  right: 5px;
  top: 5px;
  min-height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red,
inset -2px -2px 0px red;
}

.main {
  height: 120px;
  background-color: white;
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px
blue, inset -2px -2px 0px blue;
}







Вариант #2:



$('.header-clone').height($('.header').outerHeight());
$(window).resize(function() {
  $('.header-clone').height($('.header').outerHeight());
});
body {
  margin: 5px;
}

.header {
  position: fixed;
  left: 5px;
  right: 5px;
  top: 5px;
  min-height: 48px;
  background-color: white;
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red,
inset -2px -2px 0px red;
}

.header.header-clone {
  position: static;
}

.main {
  height: 120px;
  background-color: white;
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px
blue, inset -2px -2px 0px blue;
}






Ответ 4

Есть вариант, если используете препроцессор LESS. Там есть возможность создавать
переменную и совершать с ней математические операции, а возможность постоянно находиться
под блоком с атрибутом absolute позволит padding-top. Смотрите ссылку на www.codepen.io
- https://codepen.io/alexseveneight/pen/BZrRLw

Как бы ни изменилась высота блока .a, блок .b всегда будет ниже.