javascript - CSS/Javascript 滚动替换文本

Question

我正在尝试用 JS/CSS 完成一些我无法弄清楚的事情。这是我到目前为止所得到的:http://codepen.io/melissall/pen/PPWPQE

1. 我希望标题在图像中居中，直到文本向上滚动。

2. 我有一个可以更改文本颜色的 CSS 过渡，但我不希望它定时，而是基于标题的位置。有关我的意思的示例，请查看以下链接中 Logo 如何改变颜色:http://www.leaderbagco.com/

我尝试寻找示例，但似乎找不到任何有帮助的内容。如果有人能指出我正确的方向，我将不胜感激。

这是我的代码:

HTML

<div id="image"></div>
<div id="container" class="row">
  <div id="heading" class="large-12">
    <h2>Heading lorem ipsum sit dolor</h2>
  </div>
  <div id="content" class="large-12">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi ante, pulvinar a lorem id, pellentesque facilisis diam. Cras placerat libero ut urna auctor faucibus. Morbi facilisis diam et massa facilisis, vel vulputate ex malesuada. Fusce varius, ex id vulputate accumsan, arcu orci scelerisque purus, et tempor orci leo et nisi. Aliquam aliquet massa vel nibh dictum viverra. Mauris dapibus quam ut magna congue porttitor. Aenean suscipit tortor a urna dapibus dignissim. In ornare risus et mauris pellentesque pharetra. Nunc et ultrices erat. Maecenas interdum dignissim turpis, in porta erat. Donec tortor urna, finibus ut quam ac, aliquam ullamcorper arcu. Vivamus id est quis ante volutpat laoreet. Proin fringilla pharetra est a sagittis. Fusce non magna mauris. Proin iaculis aliquet mi, a pellentesque dui porttitor ac. </p>
  </div>
</div>

CSS

h2{
  color: #ffffff;
  font-size: 4em;
  font-weight: 700;
  font-family: 'Roboto Condensed', sans-serif;
}
#image  {
  background: url(http://7-themes.com/data_images/out/78/7039061-beautiful-tropical-beach-wallpaper.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 500px;
}
#heading{
  position: relative;
  top: -250px;
  text-transform: uppercase;
  color: #fff;  
}
#heading h2{
  color: #fff;
  padding-top: 20px;
}

#heading h2.bgChange{
    color: #f00;

     -webkit-transition: color 1s;
       -moz-transition: color 1s;
        -ms-transition: color 1s;
         -o-transition: color 1s;
            transition: color 1s;
}
#content{
  padding-top: 100px;
}

JS

var windw = this;

$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#heading').followTo(490);

$(window).scroll(function() {
  var addRemClass = $(window).scrollTop() > 470 ? 'addClass' : 'removeClass';
    $("#heading h2")[addRemClass]('bgChange');
});

编辑＃1:

我已经可以只使用 CSS，但遇到了其他问题。新链接在这里:http://codepen.io/melissall/pen/pjRZdx

新问题#1:标题不再位于文案上方。我必须删除那里的 JS，因为它干扰了标题位置。

新问题#2:如果向下滚动足够远，图像上的白色文本会重新出现。

编辑＃2:好吧，我通过添加一些 JS 来对其进行排序(至少在 CodePen 中)，这些 JS 检测页面何时到达某个点并更改标题并复制到相对和绝对位置。里面还有一些其他的垃圾。代码很困惑，而且仍然有缺陷，但它在 CodePen 中的功能至少达到了我想要的效果。如果其他人正在尝试类似的事情，这是最终代码: http://codepen.io/melissall/pen/pjRZdx

Answer 1

您听说过:视差吗？ https://github.com/wagerfield/parallax

您提到的那个网站使用相同的概念。

我检查了您提供的链接，我可以看到它的 2 个图像:http://cdn.shopify.com/s/files/1/0556/3397/t/1/assets/leader-bag-co-bk.png?17257 http://cdn.shopify.com/s/files/1/0556/3397/t/1/assets/leader-bag-co-wh.png?17257

所以基本上他不会改变标志颜色，而是改变图像。

查看排名前 50 的视差效果网站: http://www.creativebloq.com/web-design/parallax-scrolling-1131762

希望我的回答能对您有所帮助。