根据滚动条位置更改元素的不透明度

Question

我正在尝试根据滚动条的位置更改元素的不透明度，但是该功能总是会在第一个“否则”之后停止，因此元素“ C”，“ D”，“ E”，尽管该功能仍会检测滚动条位置

$(document).ready(function() {   
      $(window).scroll(function(event) {
        var scroll = $(window).scrollTop();

      if (scroll < 600) {
        document.getElementById("A").style.opacity = "1";
        document.getElementById("B").style.opacity = "0.5";
        document.getElementById("C").style.opacity = "0.5";
        document.getElementById("D").style.opacity = "0.5";
      } 
      else if (600 <= scroll < 1500) {
        document.getElementById("A").style.opacity = "0.5";
        document.getElementById("B").style.opacity = "1";
        document.getElementById("C").style.opacity = "0.5";
        document.getElementById("D").style.opacity = "0.5";
      } 
      else if (1500 <= scroll < 2600) {
        document.getElementById("A").style.opacity = "0.5";
        document.getElementById("B").style.opacity = "0.5";
        document.getElementById("C").style.opacity = "1";
        document.getElementById("D").style.opacity = "0.5";
      } 
      else if (2600 <= scroll < 3200) {
        document.getElementById("A").style.opacity = "0.5";
        document.getElementById("B").style.opacity = "0.5";
        document.getElementById("C").style.opacity = "0.5";
        document.getElementById("D").style.opacity = "1";

Answer 1

您不能执行x

$(document).ready(function() {   
  $(window).scroll(function(event) {
    var scroll = $(window).scrollTop();

  if (scroll < 600) {
    document.getElementById("A").style.opacity = "1";
    document.getElementById("B").style.opacity = "0.5";
    document.getElementById("C").style.opacity = "0.5";
    document.getElementById("D").style.opacity = "0.5";
  } 
  else if (600 <= scroll && scroll < 1500) {
    document.getElementById("A").style.opacity = "0.5";
    document.getElementById("B").style.opacity = "1";
    document.getElementById("C").style.opacity = "0.5";
    document.getElementById("D").style.opacity = "0.5";
  } 
  else if (1500 <= scroll && scroll < 2600) {
    document.getElementById("A").style.opacity = "0.5";
    document.getElementById("B").style.opacity = "0.5";
    document.getElementById("C").style.opacity = "1";
    document.getElementById("D").style.opacity = "0.5";
  } 
  else if (2600 <= scroll && scroll < 3200) {
    document.getElementById("A").style.opacity = "0.5";
    document.getElementById("B").style.opacity = "0.5";
    document.getElementById("C").style.opacity = "0.5";
    document.getElementById("D").style.opacity = "1";