主页 / 问题 / 686043
Accepted
Yuri
Asked:2020-07-02 00:20:01 +0000 UTC2020-07-02 00:20:01 +0000 UTC

从固定下擦出

  • 772

有一个页面由两个主要块（.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;
}
<div class="header">
</div>
<div class="main">
</div>

这个问题可以通过添加另一个与 相同高度的块来解决.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="displacer">
</div>
<div class="header">
  <div style="width: 100px; height: 48px;"></div>
  <div style="width: 100px; height: 48px;"></div>
</div>
<div class="main">
</div>

一般来说，这里：

  • .header可以改变大小，但同时，.main它必须仍然在它下面。
  • .header应该留在原处——在页面顶部position: fixed

如何解决这个问题？

javascript

4 个回答

  1. Best Answer

    创建完全相同的元素，只需向其添加一个position: static;和visibility: hidden;（这将允许它占据正确的位置，但不显示该元素）。

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

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

.b {
  background: blue;
}

.a-clone {
  position: static;
}
    <div class="a"></div>
<div class="a a-clone"></div>
<div class="b">Я не должен быть под красным блоком :с</div>

    你可以用 Javascript 做同样的事情，margin如果需要的话，也可以给这个“克隆”正确的（适当的值top和left绝对定位的元素）。

    更新

    如果块的内容动态变化，那么使用 Javascript 您可以添加一个处理程序来更改块本身的大小，您可以在其中将新的块大小值分配给具有静态定位的块的“克隆”。

    • 4
    1. 用包装纸包裹固定块。
    2. 通过 event load，获取固定块的高度并将其分配给包装器。
    3. 可选：加载后动态改变高度时，调用重新计算高度的函数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;
}
    <div class=container>
  <div class=column>
    <div class=header>
      <div class=header__fixed>And if you're</div>
    </div>

    <div class=main></div>
  </div>
  <div class=column>
    <div class=header>
      <div class=header__fixed>hurting I will replace the noise</div>
    </div>

    <div class=main></div>
  </div>
  <div class=column>
    <div class=header>
      <div class=header__fixed>with silence</div>
    </div>

    <div class=main></div>
  </div>
  <div class=column>
    <div class=header>
      <div class=header__fixed>instead flushing out your head</div>
    </div>

    <div class=main></div>
  </div>
</div>

    • 2

  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;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="main"></div>

    选项#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;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="header-clone"></div>
<div class="main"></div>

    • 1

  4. 如果您使用的是 LESS 预处理器，则有一个选项。有能力创建一个变量并用它执行数学运算，并且能够不断地在具有绝对属性的块下将允许填充顶部。请参阅链接www.codepen.io-https://codepen.io/alexseveneight/pen/BZrRLw

    无论 .a 块的高度如何变化，.b 块将始终更低。

    • 0

相关问题