запретить контенту перекрывать поля липкого заголовка - PullRequest
Новая
       27

запретить контенту перекрывать поля липкого заголовка

0 голосов
/ 08 апреля 2020

У меня есть макет, настроенный как во фрагменте ниже.

Я пытаюсь создать липкий заголовок с margin-top: 20px;

Я думал о методе, который мог бы создать закрепленный заголовок, без содержимого, перекрывающего верхнее поле закрепленного заголовка при прокрутке вниз.

В предоставленном фрагменте видно, что содержимое перекрывает пустое пространство над частью заголовка. Это то, чего я хочу избежать. Я хочу видеть 20px фонового изображения над заголовком.

Единственное решение, которое я мог придумать, - это разделить весь контент на div заголовка и тела, и дать обоим фон. , так что фон все равно будет выглядеть как одно целое.

Это показано на рисунке справа 1013 *. Вот как я знаю, что это можно сделать , но мне кажется, что это не лучший подход, так как я хотел бы сгруппировать контент в один блок, а не в 2 отдельных.

На левая сторона - это то, чего я хотел бы достичь: синяя часть содержимого не должна быть видимой, вместо этого должна быть видна фоновая картинка. И заголовок должен иметь желаемый position: sticky; top: 20px;.

Возможно ли это вообще каким-либо другим способом, или мне нужно разделить заголовок и содержимое на 2 разных элемента div, чтобы добиться этого?

enter image description here

Вот фрагмент кода для проверки текущего поведения: 

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: darkgray;
  background: url('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/cover.jpg') no-repeat center center fixed;
  background-size: auto;
  background-size: cover;
  min-width: 270px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  
}

.container-box {
  display: block;
  margin: 20px auto;
  padding: 20px;
  background-image: linear-gradient(red 100px, yellow 100px, yellow);
  height: auto;
  max-width: 920px;
  border-radius: 10px;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.navigation {
position: sticky;
top: 20px;
background-color: red;
}

.top-navigation {
  text-align: right;
  margin-bottom: 20px;
}

.bot-navigation {
  text-align: center;
  margin-bottom: 20px;
}

.content{
  text-align: center;
}
<body>
  <div class="main">
    <div class=" container-box ">
      <div class="navigation">
        <div class="top-navigation">
          <button>Logout</button>
        </div>
        <div class="bot-navigation">
          SOME NAVIGATION OVER HERE
        </div>
      </div>
      <div class="content">
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br>
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br>
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br>

      </div>
    </div>
  </div>
</body>

1 Ответ

1 голос
/ 08 апреля 2020

Вы можете рассмотреть трюк с псевдоэлементом, так как вы используете фиксированный с фоном. Вы применяете тот же фон к псевдоэлементу и помещаете его сверху, чтобы создать иллюзию 

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: darkgray;
  background: url('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/cover.jpg') no-repeat fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.container-box {
  display: block;
  margin: 20px auto;
  background: yellow;
  border-radius: 10px;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.navigation {
  position: sticky;
  top: 40px;
  background-color: red;
  padding:0 20px 20px;
}

/* this will do the magic*/
.navigation:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: -2px;
  right: -2px;
  height: 40px;
  background: url('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/cover.jpg') no-repeat fixed;
  background-size: cover;
}
/**/
/* for the radius*/
.navigation:after {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:20px;
  background:red;
  border-radius:10px 10px 0 0;
}
/**/

.top-navigation {
  text-align: right;
  margin-bottom: 20px;
}

.bot-navigation {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  text-align: center;
}
<div class="main">
  <div class=" container-box ">
    <div class="navigation">
      <div class="top-navigation">
        <button>Logout</button>
      </div>
      <div class="bot-navigation">
        SOME NAVIGATION OVER HERE
      </div>
    </div>
    <div class="content">
      SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT
      <br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME
      CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT
      <br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br>

    </div>
  </div>
...