寻求使用JavaScript创建响应式衰落标头效果

Question

这是我的第一篇文章，因此，如果我可以提供其他任何信息或对我所说的话有所澄清，请随时提出。

我正在寻找创建一个标题，该标题根据用户当前正在查看的部分从一个图像逐渐淡出。

我目前拥有的是根据Y位置更改的标题图像，如下所示：

$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 0) {
    $('#img1').fadeIn({});
}
else {$('#img2').fadeOut('fast')};
if (y > 500) {
    $('#img2').fadeIn({});
}
else {$('#img2').fadeOut('fast')};

if (y > 1000) {
    $('#img3').fadeIn({});
}
else {$('#img3').fadeOut('fast')};

if (y > 1500) {
    $('#img4').fadeIn({});
}
else {$('#img4').fadeOut('fast')};

尽管这确实可行，但在尝试使站点响应时，它不是有效的解决方案。 我已为每个部分标识了ID（“ section-1”，“ section-2”，依此类推），并希望创建代码来根据用户当前正在查看的部分ID更改标题。 有人告诉我div数组在这种情况下可能会有所帮助，但是我对Javascript还是很陌生，所以我不确定如何尝试这种方法。

对此项目提供的任何帮助将不胜感激。

编辑1：仅为此项目的标题部分添加HTML和CSS，但是如果您需要查看其他代码，请告诉我。

的HTML

  <header class="pull-center" id="masthead">
    <nav class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <div id="img1"></div>
          <div id="img2"></div>
          <div id="img3"></div>
          <div id="img4"></div>
          <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <a class="brand brand-ctg" href="#section-1"><span></span></a>
              CTG
              <span></span>
          </a>
          <div class="nav-collapse">
              <ul class="nav">
                  <li><a href="#section-2">Demo Reel</a></li>
                  <li><a href="#section-3">Portfolio</a></li>
                  <li><a class="brand brand-ctg" href="#section-1"> <span></span></a></li>
                  <li><a href="#section-4">Contact</a></li>
                  <li><a href="http://www.colortheblog.com" target="_blank">Blog</a></li>
              </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>

CSS （目前，我只有“ img” div css，但是如果您需要查看更多内容，请告诉我）

#img1 {
    display: block !important;
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-blue.png") repeat-x scroll 50% 0 transparent !important;
    height: 200px;
    left: 0;
    position: fixed !important;
    right: 0;
}
#img2 {
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-salmon.png") repeat-x scroll 50% 0 transparent !important;
    height: 200px;
    left: 0;
    position: fixed !important;
    right: 0;
}
#img3 {
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-yellow.png") repeat-x scroll 50% 0 transparent !important;
    height: 200px;
    left: 0;
    position: fixed !important;
    right: 0;
}
#img4 {
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-mint.png") repeat-x scroll 50% 0 transparent !important;
    height: 200px;
    left: 0;
    position: fixed !important;
    right: 0;
}

编辑2 ：用于演示目的的新代码

$(document).scroll(function () {
var y = $(this).scrollTop();
if ($("#section-1").scrollTop()) {
    $('#img1').fadeIn({});
}
else {$('#img2').fadeOut('fast')};
if ($("#section-2").scrollTop()) {
    $('#img2').fadeIn({});
}
else {$('#img2').fadeOut('fast')};

if ($("#section-3").scrollTop()) {
    $('#img3').fadeIn({});
}
else {$('#img3').fadeOut('fast')};

if ($("#section-4").scrollTop()) {
    $('#img4').fadeIn({});
}
else {$('#img4').fadeOut('fast')};

}）;

Answer 1

好吧，您的问题是您的if{} else{}命令不匹配：

var y = $(this).scrollTop();
if (y > 0) {
    $('#img1').fadeIn({});
}
else {$('#img2').fadeOut('fast')};

“如果我们位于顶部，请淡入＃1，否则淡出 ＃2。

根据HTML顺序（因此图像的堆叠），Img1可能在z顺序中位于顶部，因此它永远不会褪色，也不会显示其他图像。

您应该重新考虑if语句，以使每个语句都有适合任何给定标头图像的最大值和最小值。 更不用说如果您的内容更改大小，则您的滚动高度现在不正确（您应该根据长者的滚动位置来计算它们）。

Nechemya Kanelsky的盒装解决方案可能也是一个更好的计划（我对这两个站点都不熟悉）。