更改背景颜色时的css滚动链接定位效果警告答案

【问题标题】：css scroll-linked positioning effect warning on change background color更改背景颜色时的css滚动链接定位效果警告
【发布时间】：2017-05-22 17:14:12
【问题描述】：

当新部分成为最明显的部分时，我想要一个背景透明颜色覆盖更改效果。它按原样工作，但给了我一个警告：

此站点似乎使用了滚动链接的定位效果。这可能不适用于异步平移；请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects 了解更多详情并加入有关相关工具和功能的讨论！ https://fiddle.jshell.net/_display/

在没有警告的情况下是否可能产生这种效果以及如何实现？

请查看带有警告at this fiddle 的示例。

$(window).on("load scroll touchmove", function() {
  var sections = ["#first", "#second", "#third", "#four", "#five"];
  var colors = [
    "rgb(255, 255, 255)", //white
    "#ffC0CB", //pink
    "rgb(0, 255, 0)", //green
    "rgb(223, 181, 182)",
    "rgb( 98,  83,  80)",
    "rgb(157, 163, 135)",
    "rgb(208, 212, 189)",
  ];

  var spacer = $(window).height() * 0.4;
  var scrollTop = $(document).scrollTop();
  $.each(sections, function(index, value) {
    //console.log("each " + index + ", " + value);
    if ($(value).length) {
      if (index == 0 || index == sections.length - 1) {
        if (scrollTop >= $(value).position().top - spacer) {
          $('body').css('background-color', colors[index]);
        };
      } else {
        if (scrollTop > $(value).position().top - spacer) {
          $('body').css('background-color', colors[index]);
        };
      }
    } else {
      console.log('Background color scroll: $(' + value + ') not found.');
    }
  });
});

section {
  min-height: 100vh;
}
body {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 0 none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  background-color: red;
}
body::after {
  content: "";
  z-index: -1;
  background: url(https://unsplash.it/1300/1150);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <section id="first">
    first first
  </section>
  <section id="second">
    second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
    <br>second
  </section>
  <section id="third">
    third
  </section>
  <section id="four">
    4
  </section>
  <section id="five">
    five
  </section>
  <div id="bg">bla</div>
</body>

【问题讨论】：

标签： jquery html css scroll

【解决方案1】：

在使用靶心库时有效

https://jsfiddle.net/sottobe/xjtxnqwa/13/

    //using bullseye from http://static.pixeltango.com/jQuery/Bullseye/
$(function() {
    var sections =  {
            first:"rgb(255, 255, 255)", 
            second: "#ffC0CB", 
            third: "rgba(104, 212, 94, 0.4)", 
            four: "#e6f5ff", 
            five: "#e0e0eb", 
            six:"rgb(157, 163, 135)",
                    };
    function changebgcolor(e) {
            var color = sections[$(this).attr('id')];
            console.log($(this).attr('id') + ': ' + e.type + ' --> ' + color);
            $('body').css('background-color', color);
    }
    alert('binding');
    $('section').bind('enterviewport', changebgcolor).bullseye();
});

【讨论】：