Question

我正在为一个客户开发一个网站，而且我被困在一些对我来说非常挑战的事情上。我提供了一个视频链接，显示了我在下面尝试完成的效果以及一个显示我到目前为止所做的工作的代码。

我找到了一个插件，使得标题发粘，直到用户滚动到某一点，但我最大的挑战是垂直线的效果。我试过的东西强制该行向上滚动内容，并且当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

Answer 1

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

这是我为你做的一个例子：

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

当您到达文本时，它不会在隐藏和滚动第一个框之间进行转换，因为您需要使用Javascript来执行此操作，而且它只是一个快速而肮脏的演示。（我甚至无法在上面放置一个合适的Doctype，否则会出现故障！）

但它确实隐藏了白线，因为你只使用CSS来滚动。

这是一个老把戏。这个着名的页面是从2002年开始的，它使用background-position: fixed来模拟不存在于CSS中的不透明度过滤器，＆＃34;浴室窗口＆＃34;效果：

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>

视差滚动，垂直线消失

1 个答案: