Question

我有一个页眉，页脚和两个正文部分。我只想将整个页面滚动到我的视差容器。我设法提出了对视差的标记和样式，但是脚本没有成功。

<div class="wrapper">
 <div class="top-content">
  <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
 </div>
<div class="parallax">
<div class="parallax__screen">
  <div class="parallax__image">
    <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/1/200/300');"></div>
  </div>
  <div class="parallax__copy">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    </p>
  </div>
</div>
<div class="parallax__screen">
  <div class="parallax__image">
    <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/22/200/300');"></div>
  </div>
  <div class="parallax__copy">
    <p>
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    </p>
  </div>
</div>
<div class="parallax__screen">
  <div class="parallax__image">
    <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/15/200/300');"></div>
  </div>
  <div class="parallax__copy">
    <p>
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
    </p>
  </div>
</div>
<div class="parallax__screen">
  <div class="parallax__image">
    <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/10/200/300');"></div>
  </div>
  <div class="parallax__copy">
    <p>
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    </p>
  </div>
</div>
</div>
<div class="bottom-content">
 <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </p>

任何帮助将不胜感激。这是我的fiddle

Answer 1

您是否要避开任何图书馆而自己做？无论哪种方式，我都不认为您只能使用CSS来完成，而是需要一些JS。

我推荐fullPage.JS，它非常好用。

Answer 2

这是您的目标吗？

* {
  margin: 0;
  padding: 0;
}

body {//you had a typo here
  background-color: #fff;
  font-size: 16px;
  color: #333;
}

.bottom-content {
  position: absolute;
}

.parallax {
  position: sticky;
  top: 96px;
  overflow: hidden;
  @include e(screen) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 96px);
    width: 100vw;
  }
  @include e(image) {
    height: calc(100vh - 96px);
    border-radius: 0 rem(5) rem(5) 0;
    width: 100vw;
    z-index: 10;
  }
  @include e(illustration) {
    height: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }
  @include e(copy) {
    width: 100vw;
    z-index: 100;
    position: absolute;
  }
}

通过这种样式，您可以在顶部带有文字的地方实现视差

Answer 3

您可以使用类似以下的内容。

var slide = function() {
        $('.nextsection').show();
            $('mainsection').find('.currentsection').animate({
                marginLeft : '-100%'
            }, 500);
            $('mainsection').find('.nextsection').animate({
                marginLeft : '0%'
            }, 500, function() {
                if (!_.isUndefined(fn)) {
                    fn();
                }
            });
    };

要在其中滑动“ nextsection”，并从中滑动“ currentsection”。 “ mainsection”就像“ nextsection”和“ currentsection”都包含在其中。

Answer 4

一些仅使用CSS的示例：

Answer 5

您是否要固定标题并滚动parallex部分？如果是这样，您可以设置标题的位置和z-index（顶部内容）。

<style>.top-content {position: fixed; z-index: 100; background-color: white;} . 
</style>

这里是一个示例：Fiddle Here

全页滚动到特定部分

5 个答案: