Question

我有一个固定在页面顶部的标题，我想添加一个＆＃34;标题＆＃34;在它上面（带有关闭图标）。因此，用户可以删除顶部横幅，只看到标题。

我可以通过以下方式执行此操作，但如果用户关闭横幅，则标题位置错误。（我希望标题在顶部是粘性的：0;如果横幅已关闭。）是否有一个纯CSS解决方案（没有JS）？

＆＃13;

.header {
  position: fixed;
  top: 100px;
  background-color: #f00;
  height: 100px;
  width: 100%;
}

.main {
  background-color: #ff0;
  padding-top: 100px;
  padding-bottom: 120px;
}

.banner {
  position: fixed;
  top: 0;
  background-color: #f0f;
  height: 120px;
  width: 100%;
}

＆＃13;

<div class="banner">This is the banner that can be closed (X)</div>
<div class="header">This is the header</div>
<div class="main">
  content<br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br>
</div>

＆＃13;

Answer 1

解决该问题的一种方法。将标题和横幅放在一个已修复的父级中。添加动画以关闭以使其更好。

document.getElementsByClassName('banner')[0].onclick = function(){
    this.classList.add('closed');
}

.top{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.header {
  background-color: #f00;
  height: 100px;
}
.banner {
  background-color: #f0f;
  height: 120px;
  transition: height .5s;
  overflow: hidden;
}
.banner.closed {
  height: 0;
};
.main {
  background-color: #ff0;
  padding-top: 100px;
  padding-bottom: 120px;
}

<div class="top">
  <div class="banner">This is the banner that can be closed (X)</div>
  <div class="header">This is the header</div>
</div>
<div class="main">
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
</div>

Answer 2

您可以在标题周围使用包装器。包装器是固定的，标头不是。使用flexbox，您可以将它们放在一列中，如果一个关闭（第一个），则下一个将跳到顶部。下面是示例片段：

$('.banner').click(function() {
  $(this).hide();
});

.wrapper__fixed {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  background-color: #f00;
  height: 100px;
  width: 100%;
}
.main {
  background-color: #ff0;
  padding-top: 100px;
  padding-bottom: 120px;
}
.banner {
  top: 0;
  background-color: #f0f;
  height: 120px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper__fixed">
<div class="banner">This is the banner that can be closed (X)</div>
<div class="header">This is the header</div>
</div>
<div class="main">
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
</div>

如何在页面顶部放置两个固定的div？

2 个答案: