javascript - 希望使用 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')};

虽然这确实有效，但在尝试使网站具有响应性时，它并不是一个有效的解决方案。我对每个部分进行了标识(“section-1”“section-2”等)，并希望创建可以根据用户当前正在查看的部分 ID 更改标题的代码。有人告诉我，在这种情况下，div 数组可能会有所帮助，但我对 Javascript 还是很陌生，所以我不确定如何尝试。

如果能为这个元素提供任何帮助，我们将不胜感激。

编辑 1:仅为该元素的 header 部分添加 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 语句，以便每个语句都有适合任何给定标题图像的最大和最小值。更不用说如果您的内容改变大小，您的滚动高度现在就不正确(您应该根据 anchor 的滚动位置来计算它们)。

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