Question

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

1）现在仍然可以使用滚动条将平滑的文本颜色从白色变为黑色也可以使用滤镜？或者我可以创建第二个h1文本，上面有0个不透明度，如何逐渐改变它？ 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%);
}

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

发生的事情是我使用h1颜色标记通过滚动功能更改rgb颜色。现在，我正在将颜色从white更改为black，反之亦然，但您可以实现您想要的任何颜色变化。查看CODEPEN

中的工作示例

粘滞的标题文本与滚动上的平滑颜色更改

1 个答案: