垂直线消失的视差滚动答案

【问题标题】：Parallax scrolling with disappearing vertical line垂直线消失的视差滚动
【发布时间】：2015-05-07 22:07:25
【问题描述】：

我正在为客户开发一个网站，但我遇到了一些对我来说非常具有挑战性的事情。除了显示我到目前为止所做的代码笔之外，我还包括一个视频链接，显示我正在尝试完成的效果。

我发现了一个插件，它可以让标题保持粘性，直到用户滚动到某个点为止，但我最大的挑战是垂直线的效果。我尝试过的东西会强制线条随着内容向上滚动，并且随着 div 变小，线条应该会变小，如视频所示。有没有一种优雅的方法来创建这种效果而无需大量丑陋的 javascript 编码？

为澄清而编辑：该视频展示了一个线框概念。网站的每个部分都会有背景图像，它将使用 background-attachment:fixed 来创建视差效果。背景图像也会缩放以适应屏幕的全宽/高度。

视频链接：https://www.youtube.com/watch?v=kX_MHb8h-r8&feature=youtu.be

$(function() {
  return $("[data-sticky_column]").stick_in_parent({
    parent: "[data-sticky_parent]"
  });
});
$(window).on("resize", (function(_this) {
  return function(e) {
    return $(document.body).trigger("sticky_kit:recalc");
  };
})(this));

h1 {
  margin: 0 0 0 0;
  color: #ff0000;
}
.title-container {
  padding-top: 30px;
  padding-bottom: 30px;
}
.fixedbkg {
  width: 100%;
  height: 100vh;
  display: block;
}
.container {
  width: 100%;
  display: block;
}
.bg1 {
  background-color: #acacac;
  background-attachment: fixed;
}
.bg2 {
  background-color: #a0a0a0;
  background-attachment: fixed;
}
.bg3 {
  background-color: #595959;
  background-attachment: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bg1 fixedbkg" data-sticky_parent>
    <div class="title-container" data-sticky_column>
      <h1>Title 1</h1>
    </div>
  </div>
  <div class="bg2 fixedbkg" data-sticky_parent>
    <div class="title-container" data-sticky_column>
      <h1>Title 2</h1>
    </div>
  </div>
  <div class="bg3 fixedbkg" data-sticky_parent>
    <div class="title-container" data-sticky_column>
      <h1>Title 3</h1>
    </div>
  </div>
</div>

CodePen 链接：http://codepen.io/anon/pen/waMwxP

【问题讨论】：

如果背景是纯色的，就像视频中那样，那么你可以给第二个div加上一个粗的border-top，用第一个div的背景颜色，这样它就可以隐藏线条第一个 div 在第二个 div 内容顶部上方一定距离。
谢谢，但它实际上是一个图像，图像大小将是全屏。

标签： jquery html css sticky

【解决方案1】：

您可以使用旧的background-position: fixed 技巧。

这是我为您制作的示例：

http://www.googledrive.com/host/0B1rSHSpIdbJdSm16ZUwyMDZlTUk

当您到达文本时，它不会在中途隐藏和滚动第一个框之间进行转换，因为您需要 Javascript 来执行此操作，这只是一个快速而肮脏的演示。（我什至不能把合适的 Doctype 放在上面，否则会坏掉！）

但它确实会在您滚动时隐藏白线，仅使用 CSS。

这是一个老把戏。这个著名的页面是 2002 年的，它使用background-position: fixed 来模拟 CSS 中不存在的不透明滤镜，“浴室窗”效果：

http://meyerweb.com/eric/css/edge/complexspiral/glassy.html

我上面例子的源代码：

<html>
<head>
    <title>CSS-only line hiding effect</title>
    <style>
        html, body {
            margin: 0;
            font-family: Futura;
        }
        p {
            width: 25em;
        }
        .pad {
            width: 100%;
            height: 100%;
            padding: 2em;
            box-sizing: border-box;
        }
        #one {
            position: fixed;
            top: 0;
            background: black url(https://www.bing.com/az/hprichbg/rb/CambridgeBotanicGarden_ROW8585973051_1920x1080.jpg);
            color: white;
        }
        #two {
            z-index: 1;
            position: relative;
            background: #67c3e8 url(https://www.bing.com/az/hprichbg/rb/KokneseCastle_ROW14801377853_1920x1080.jpg);
        }
        #coverOne {
            position: absolute;
            width: 100%;
            height: 2em;
            top: -2em;
            left: 0;
            background: black url(https://www.bing.com/az/hprichbg/rb/CambridgeBotanicGarden_ROW8585973051_1920x1080.jpg) fixed;
        }
        .line {
            position: absolute;
            top: 18em;
            bottom: 0;
            left: 5em;
            width: 5px;
            background: white;
        }
    </style>
</head>
<body>
    <div class="pad" id="one">
        <h1>ONE</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        <div class="line"></div>
    </div>
    <div class="pad"></div>
    <div class="pad" id="two">
        <div id="coverOne"></div>
        <h1>TWO</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>

【讨论】：

谢谢，但我不相信在我正在开发的商业网站上使用它会很舒服。我喜欢它背后的想法，但我担心它无法在各种浏览器和设备上正常工作。我还想补充一点，我可以使用 JavaScript/jQuery 来完成这项任务。