粘性 header 文本，滚动时颜色变化平滑

Question

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

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

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%);
}

JS

    $(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");
        }
    });
});

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

Answer 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

中的工作示例

粘性 header 文本，滚动时颜色变化平滑

Sticky header text with smooth color change on scroll

html

css

jquery

scroll

sticky