时间戳

首页 > 解决方案 > 根据滚动条位置更改元素的不透明度

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

问题描述

我正在尝试根据滚动条的位置更改元素的不透明度，但是该函数总是会在第一个“else if”之后停止，因此元素“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";

标签： javascriptjquery

解决方案

你不能做 x < a < y 它必须是 x < a && a < y...

$(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";

推荐阅读