Question

我正在为一个新客户开发一个WordPress网站，该客户想要8个100vh的部分并捕捉到每个部分。我想在其中添加页脚，以防止其跳出视图。这就是我的atm：

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}

正如您所知，页脚部分将迅速回到ID为screen4的部分。我不希望将页脚放置在绝对位置，并且总是在屏幕上显示，更像是在滚动时自动显示。

如果我能帮上忙，看看是否只是CSS解决方案，我宁愿不使用javascript。

非常感谢。菲利普

添加页脚以捕捉和滚动网站

0 个答案: