Добавить нижний колонтитул для оснастки и прокрутки сайта - PullRequest
Новая
       19

Добавить нижний колонтитул для оснастки и прокрутки сайта

0 голосов
/ 14 сентября 2018

Я разрабатываю веб-сайт WordPress для нового клиента, которому нужно 8 секций по 100vh и привязать к каждой секции. Я хочу добавить к нему нижний колонтитул и сохранить его вне поля зрения. Это то, что у меня есть:

HTML 

<div class="box-bg">
    <section class="slide" id="screen1">
      <div class="centered">
        <h1 class="home-title" id="">Your reputation, Our Priority</h1>
      </div>
    </section>
    <section class="slide" id="screen2">
      <div class="centered">
        <h1 class="home-title">Welcome, we're here to help you.</h1>
      </div>
    </section>
    <section class="slide" id="screen3">
      <div class="centered">
        <h1 class="home-title" id="">Your reputation, Our Priority</h1>
      </div>
    </section>
    <section class="slide" id="screen4">
      <div class="centered">
        <h1 class="home-title">Welcome, we're here to help you.</h1>
      </div>
    </section>
    <section class="slide-footer" id="foo">
      <div id="footer-block"></div>
      <footer id="footer">
        <div id="mastfooter">
          <div id="footy"></div>
          <div id="footy"></div>
          <div id="footy"></div>
          <div id="footy"></div>
        </div>
        <div id="btm-footer"></div>
      </footer>
  </section>

CSS 

.box-bg {
  position:relative;
  height:100vh;
  overflow:auto;
  scroll-snap-type:mandatory;
  scroll-snap-points-y:repeat(100vh);
  scroll-snap-destination:0 100%;
}
.slide {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh
}
.slide-footer {
  display:block;
  justify-content:center;
  align-items:center;
  height:30vh
}
.centered {width:90%;margin:8% 5% 0;text-align:center}
#screen1 {
    background:#C74191;
}
#screen2 {
    background:#00B2C2;
}
#screen3 {
    background:#F3B51C;
}
#screen4 {
    background:#00AC97;
}
#screen5 {
    background:#007D98;
}
#screen6 {
    background:#95C11F;
}
#screen7 {
    background:#008F89;
}
#screen8 {
    background:#474744;
}
.home-title {font-size:5rem;
text-transform: none;
font-weight:100;color:#fff}
.centered h2 {font-size:3rem;color:#fff}

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

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

Большое спасибо заранее. Phillip

...