HTML / CSS - два элемента div с одним градиентным фоном, но одним липким элементом - PullRequest
Новая
       49

HTML / CSS - два элемента div с одним градиентным фоном, но одним липким элементом

0 голосов
/ 22 октября 2018

У меня есть проблема, которая меня несколько расстраивает.Сценарий:

У меня есть два деления.Top div - это баннер (содержащий только логотип).Нижний элемент div - это панель навигации, содержащая несколько значков в виде ссылок и раскрывающийся список.

Я хочу две следующие вещи:

  1. иметь согласованный линейный градиентный фон над двумя элементами div
  2. в нижней части, navbar div, чтобы иметь положение: sticky, top: 0, так что он остается в верхней части страницы при прокрутке.

Я могу выполнить оба вышеперечисленных независимо, ноне одновременно.Есть ли способ достичь этого?

Упрощенная версия CSS и HTML, с версией, которая имеет липкую панель навигации, но градиент для каждого деления, не начиная с одного деления и заканчивая в другом: 

#banner,
.navbar {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
  padding: 5px 5px 5px 5px;
}

.navbar {
  position: sticky;
  top: 0;
}

.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}
<div id="banner" class="Container-fluid">
  <div class="banner-row">
    <h1>Logo!</h1>
  </div>
</div>
<div class="navbar">
  <ul class="nav navbar-nav">
    <li><a href="/home/"><span>Home</span></a></li>
    <li><a href="/about/"><span>About</span></a></li>
    <li><a href="/contact/"><span>Contact</span></a></li>
  </ul>
</div>
<div class="container body-content">
  <h1>Content!</h1>
  <p>Stuff to fill a space.</p>
</div>

И с обратным: 

header {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
  padding: 5px 5px 5px 5px;
}

.navbar {
  position: sticky;
  top: 0;
}

.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}
<header>
  <div id="banner" class="Container-fluid">
    <div class="banner-row">
      <h1>Logo!</h1>
    </div>
  </div>
  <div class="navbar">
    <ul class="nav navbar-nav">
      <li><a href="/home/"><span>Home</span></a></li>
      <li><a href="/about/"><span>About</span></a></li>
      <li><a href="/contact/"><span>Contact</span></a></li>
    </ul>
  </div>
</header>
<div class="container body-content">
  <h1>Content!</h1>
  <p>Stuff to fill a space.</p>
</div>

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

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

Я также включил фрагмент, чтобы вы могли попробовать.Дайте мне знать, правильно ли я вас понял.

#banner,
.navbar {
  padding: 5px 5px 5px 5px;
}

.navbar {
  position: sticky;
  top: 0;
}

.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}

.content {
  background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
<div id='content' class='content'>
  <div id="banner" class="Container-fluid">
    <div class="banner-row">
      <h1>Logo!</h1>
    </div>
  </div>
  <div class="navbar">
    <ul class="nav navbar-nav">
      <li><a href="/home/"><span>Home</span></a></li>
      <li><a href="/about/"><span>About</span></a></li>
      <li><a href="/contact/"><span>Contact</span></a></li>
    </ul>
  </div>
  <div class="container body-content">
    <h1>Content!</h1>
    <p>Stuff to fill a space.</p>
  </div>
</div>
0 голосов
/ 22 октября 2018

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

#banner {
  padding: 5px 5px 5px 5px;
  position:relative;
  z-index:1;
}

.navbar {
  position: sticky;
  padding: 5px 5px 5px 5px;
  top: 0;
}
.navbar:before {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  bottom:0;
  top:-100px;
    background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}


.navbar li {
  display: inline;
}

.container {
  height: 1000px;
}
<div id="banner" class="Container-fluid">
  <div class="banner-row">
    <h1>Logo!</h1>
  </div>
</div>
<div class="navbar">
  <ul class="nav navbar-nav">
    <li><a href="/home/"><span>Home</span></a></li>
    <li><a href="/about/"><span>About</span></a></li>
    <li><a href="/contact/"><span>Contact</span></a></li>
  </ul>
</div>
<div class="container body-content">
  <h1>Content!</h1>
  <p>Stuff to fill a space.</p>
</div>
...