滚动时带有平滑颜色变化的粘性标题文本答案

【问题标题】：Sticky header text with smooth color change on scroll滚动时带有平滑颜色变化的粘性标题文本
【发布时间】：2016-02-02 02:21:47
【问题描述】：

任务是 - 在标题中为 h1 标签居中（水平和垂直）添加粘性类，并将其跟踪到第二个位置并放入“关于”部分，滚动，示例（但它不起作用） http://codepen.io/AlexanderDolgan/pen/bEjwRP 所以，当用户开始向下滚动页面时，我使用 jQuery 为该元素添加了粘性类（位置：固定，将顶部：更改为 0，重置转换：翻译（-50％，0））。

1）现在仍然可以通过滚动将文本颜色从白色平滑更改为黑色可能使用过滤器？或者我可以在上面创建第二个不透明度为 0 的 h1 文本，如何逐渐改变它？ 2）在底部位置（绿色标题）添加另一个类并将文本放在那里。

http://codepen.io/AlexanderDolgan/pen/bEjwRP

    <html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <!--site header -->
    <section class="site-header">
      <!--company name and desc-->
      <div class="hero-text" id="sticky">
        <h1 >Company name</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      </div>
    </section>
    <section class="about">
      <h2>I want to move the company name here</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod dolorum doloremque dicta iste a atque iure explicabo? Laborum, magnam?</p>
    </section>
  </div>
</body>

</html>

CSS

* {
  box-sizing: border-box;
}
body {
  min-height:1000px;
}

body, h1, .wrapper {
  margin: 0;
  padding: 0;
}

// site header
.site-header {
  background: grey;
  height: 50vh;
  min-height: 200px;

  position:relative;
}

// company name and desc
.hero-text {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  text-align: center;
  color: white;
}


.about {
  text-align: center;
}
.about h2 {
  color:green;
}
.about p {
  display: block;
  margin: 0 auto;
  max-width: 700px;
}

.sticky {
  width: 75%;
  position: fixed;
  top:0;
  transform: translate(-50%,0%);
}

    $(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#sticky').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
            $('#sticky').addClass("sticky");
        } else {
            $('#sticky').removeClass("sticky");
        }
    });
});

感谢您的帮助！我无法解决我的第一个项目的问题。如果有人给我一个提示，那就太好了。

【问题讨论】：

您的代码现在能完成这项工作吗？如果没有，您看到的问题到底是什么？你想让我做什么？你的问题还不清楚
感谢您的回复，是的，我部分完成了挑战 - 1) 现在仍然可以通过滚动将文本颜色从白色平滑更改为黑色可能使用过滤器吗？或者我可以在上面创建第二个不透明度为 0 的 h1 文本，如何逐渐改变它？ 2）在底部位置（绿色标题）添加另一个类并将文本放在那里。也许我在上班的路上完成了它

标签： jquery html css scroll sticky

【解决方案1】：

我认为你可以这样做：

$(window).scroll(function(){


    if( $(window).scrollTop() > stickyHeaderTop ) {
        //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
        $('#sticky').addClass("sticky");

        $('#sticky h1').css("color","rgb(0,0,0)");

    } else {
        $('#sticky').removeClass("sticky");

        var colorPic = Math.round((1-$(window).scrollTop()/stickyHeaderTop)*255);
        $('#sticky h1').css("color","rgb("+colorPic+","+colorPic+","+colorPic+")");
    }
});

发生的事情是我正在使用 rgb 颜色标签通过滚动功能更改 h1 颜色。现在，我正在将颜色从white 更改为black，反之亦然，但您几乎可以实现任何您想要的颜色更改。查看CODEPEN中的一个工作示例

【讨论】：

非常感谢，它帮助我完成了我的第一个项目。