Question

首先我很抱歉，这可能是一个非常简单的方法，但我是一个业余的javascript等我希望你需要。这就是我想要做的事情：

我有一个基本的“视差”网站（类似于this的内容），但我想在向下滚动时添加一个覆盖底部幻灯片一半的页脚，内容为底部滑动停留。

与目前一样，当您向下滚动到页脚时，第五张幻灯片中的内容会移动，但我希望它停在第五张幻灯片上，页脚在顶部滑动。

任何帮助将不胜感激！

抱歉：这是Lorem ipsumed代码：

//I have no idea what javascript i should be using.

* {
  margin: 0;
  padding: 0;
  min-height: 15px;
}
.page {
  height: 100vh;
  position: relative;
}
.page-title {
  font-family: 'Quattrocento Sans';
  font-size: 2.5em;
  transform: translateY(100%);
  margin-left: 50px;
  margin-right: 50px;
}
.page-sub {
  font-family: 'Coming Soon';
  font-size: 1.5em;
  text-align: center;
  margin: 50px;
}
.page-para {
  font-family: 'Quattrocento Sans';
  font-size: 1.2em;
  line-height: 1.5;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 50px;
  margin-left: 50%;
  position: relative;
}
.page-link {
  text-decoration: none;
  color: #F0C808;
}
.page-link:hover {
  color: #F0C808;
  font-weight: bold;
}
.link-box {
  color: #F0C808;
  background-color: #07A0C3;
  border: 1px solid #07A0C3;
  font-family: 'Coming Soon';
  font-size: 1.5em;
  text-align: center;
  height: 3em;
  width: 8em;
  line-height: 3em;
  bottom: 100px;
  right: 150px;
  position: absolute;
}

#page-one {
  background: url('img/page-one.jpg') no-repeat fixed;
  background-size: 100%;
}
.main-title {
  font-family: 'Quattrocento Sans';
  font-size: 3em;
  text-align: center;
  padding: auto;
  align-items: center;
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-100%);
}
#page-two {
  background: url(img/page-two.png) no-repeat;
  background-size: 100%;
  background-color: #E2E2E2;
}
#page-three {
  background: url(img/page-three.jpg) no-repeat fixed;
  background-size: 100%;
}
#page-four {
  background: url(img/page-four.jpg) no-repeat;
  background-size: 100%;
  background-color: #E2E2E2;
}
#page-five {
  background: url(img/page-five.jpg) no-repeat fixed;
  background-size: 100%;
}
.page-five-para {
  margin: 0;
}
.page-five-bold {
  font-family: 'Coming Soon';
  font-size: 1.2em;
  margin: 0;
}
#footer {
  background-color: #E2E2E2;
}
.foot {
  margin: 0;
  display: inline-block;
  vertical-align: top;
  width: 33%;
  height: 50vh;
}
h5 {
  font-family: 'Coming Soon';
  font-size: 1.5em;
  margin: 15px;
  padding-left: 15px;
}
.right-foot-spacer {
  height: 2.41em;
  margin: 15px;
  padding-left: 15px;
}
.foot-content {
  font-family: 'Quattrocento Sans';
  font-size: 1.2em;
  margin: 20px;
}
.foot-list {
  list-style: none;
}
.foot-link {
  color: black;
  text-decoration: none;
}
blockquote {
  margin: 0px;
  margin-bottom: 15px;
}
.right-footer p {
  text-align: right;
}

<!DOCTYPE html>
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="page" id="page-one">
    <h1 class="main-title">Title</h1>
  </div>

  <div class="page" id="page-two">
    <h2 class="page-title">Page two title</h2>
    <h4 class="page-sub">subtitle</h4>
    <p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
      metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
  </div>

  <div class="page" id="page-three">
    <h2 class="page-title">Page three title</h2>
    <h4 class="page-sub">subtitle</h4>
    <p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
      metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
    <a href="http://www.google.com" class="page-link">
      <div class="link-box">Link</div>
    </a>
  </div>

  <div class="page" id="page-four">
    <h2 class="page-title">Page title</h2>
    <h4 class="page-sub">subtitle</h4>
    <p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
      metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
    <a href="http://www.bing.com" class="page-link">
      <div class="link-box">Link</div>
    </a>
  </div>

  <div class="page page-five" id="page-five">
    <h2 class="page-title">Page title</h2>
    <h4 class="page-sub">Lorem ipsum dolor</h4>
    <div class="page-para">
      <p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p>
      <h6 class="page-five-bold">Lorem ipsum dolor</h6>
      <p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div id="footer">
    <div class="foot left-footer">
      <h5>Lorem Ipsum</h5>
      <p class="foot-content email">someone@example.com</p>
    </div>

    <div class="foot center-footer">
      <h5>Footer</h5>
      <ul class="foot-content">
        <li class="foot-list"><a href="http://www.google.com" class="foot-link">Google</a>
        </li>
        <li class="foot-list"><a href="http://www.bing.com" class="foot-link">Bing</a>
        </li>
        <li class="foot-list"><a href="http://www.yahoo.com" class="foot-link">Yahoo</a>
        </li>
      </ul>
    </div>

    <div class="foot right-footer">
      <div class="right-foot-spacer"></div>
      <div class="foot-content quote">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
        <p>-Lorem Ipsum</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

如果我已正确理解您的问题，那么实现您所寻求效果的一种方法是监控最终getBoundingClientRect().top的{{1}}属性和<div>属性。倒数第二个getBoundingClientRect().bottom。

当最终<div>的{{1}}属性点击视口顶部时，您可以更改元素的样式规则以将其固定在该位置;
当倒数第二个getBoundingClientRect().top的{{1}}属性返回到视口顶部的视图中时，您可以取消固定最终<div>，以便它再次开始正常滚动。< / LI>

示例：

getBoundingClientRect().bottom

<div>

<div>

使div显示在滚动

1 个答案: