Question

JS noob在这里。简单的东西，只是想在我滚动页面时改变左边框的颜色。到目前为止，我有两种颜色可供使用，但我需要添加第三种颜色。

这是我的版本 - 我已经注释掉了我的错误代码

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

    if (scroll >= 200) {
      $(".main-wrapper").addClass("blue");
    } 

    //if(scroll>=400) {
    //  $(".main-wrapper").addClass("green");
    //}


   else {
     $(".main-wrapper").removeClass("blue");
     //$(".main-wrapper").removeClass("green");
    }
});

干杯！

Answer 1

尝试制作类似的东西

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200 && scroll < 400) {
        $(".main-wrapper").removeClass("green");
        $(".main-wrapper").addClass("blue");
    } 
    
    else if(scroll>=400) {
      $(".main-wrapper").removeClass("blue");
      $(".main-wrapper").addClass("green");
    }
  
    else {
       $(".main-wrapper").removeClass("blue", "green");
    }
});

body {
  min-height:1200px;
  transition:background-color 0.75s ease;
}

.main-wrapper{
   border-left: 9px solid red; 
   /* background-color: red; */
   transition:border-left-color 0.9s ease;
   min-height: 1020px; 
}

.blue {
  border-left-color: blue;
}

.green {
  border-left-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
  
</div>

Answer 2

您可以使用具有特定宽度的if else条件并相应地更改边框颜色。

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll < 200) {
    $(".main-wrapper").css("border-color", "red");
  } else if (scroll > 200 && scroll < 1000) {
    $(".main-wrapper").css("border-color", "blue");
  } else {
    $(".main-wrapper").css("border-color", "green");
  }




});

/* body {
  background-color: red;
  min-height:1200px;
  transition:background-color 0.75s ease;
} */

.main-wrapper {
  border-left: 9px solid red;
  /* background-color: red; */
  transition: border-left-color 0.9s ease;
  min-height: 1020px;
  height: 3000px;
}

.blue {
  border-left-color: blue;
}

.green {
  border-left-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">

</div>

Answer 3

如果您想添加更多颜色，那么您可以尝试此解决方案。您可以轻松地向0数组添加更多对象。

＆＃13;

class ModelDetail extends Component {

  constructor(props) {
    super(props);
    this.state = {
      slideIndex: 0,
    };
  }

  handleChange (value) {
    this.setState({
      slideIndex: value,
    });
  };

  render() {
    return (
      <div>
        <Tabs onChange={this.handleChange.bind(this)} value={this.state.slideIndex}>
          <Tab label="Input Parameters" value={0} style={styles.heading} />
          <Tab label="Benchmark Output" value={1} style={styles.heading} />
          <Tab label="Output Figures" value={2} style={styles.heading} />
        </Tabs>
        <SwipeableViews index={this.state.slideIndex}  onChangeIndex={this.handleChange.bind(this)}>
          ...
          ...
        </SwipeableViews>
      </div>
    )}

＆＃13;

scrollColor

＆＃13;

var scrollColor = [
  {
    maxScroll: 600,
    class: 'green'
  },
  {
    maxScroll: 400,
    class: 'blue'
  },
  {
    maxScroll: 200,
    class: 'red'
  }
];
    
$(window).scroll(function() {    
  var scroll = $(window).scrollTop();
  var mainClass;
  
  for(var i = 0; i<scrollColor.length;i++) {
    $(".main-wrapper").removeClass(scrollColor[i].class);
    if(scrollColor[i].maxScroll > scroll) {
      mainClass = scrollColor[i].class;
    }
  }
  $(".main-wrapper").addClass(mainClass);
});

＆＃13;

Answer 4

访客的一个小插件：

＆＃13;

$.fn.classChange = function(myClasses) {
    var myWin = $(window);
    return this.each(function() {
        var myWrapper = $(this);
        myWin.on('scroll', function(e) {
            var scroll = myWin.scrollTop();
            var found = false;
            $.each(myClasses, function(i, cl) {
            	if( scroll<cl.s && !found ) {
                    found = true;
                    if( !cl.a ) {
                        myWrapper.addClass(cl.c);
                        cl.a = true;	
                    };
                } else {
                    myWrapper.removeClass(cl.c);
                    cl.a = false;
                }
            });
        });
    });
};

$('.main-wrapper').classChange([
    {
    	"s": 200,
        "c": "border-red",
        "a": false
    },
    {
    	"s": 400,
        "c": "border-blue",
        "a": false
    },
    {
    	"s": 100000,
        "c": "border-green",
        "a": false
    }
]);

＆＃13;

body {
    margin: 0;
}

.main-wrapper {
    border-left: 9px solid red;
    /* background-color: red; */
    transition: border-left-color 0.3s ease;
    min-height: 1020px;
}

.border-red {
    border-left-color: red;
}

.border-blue {
    border-left-color: blue;
}

.border-green {
    border-left-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
    Scroll down
</div>

＆＃13;

同样在JSFiddle或this way。

JS在滚动时更改边框颜色

4 个答案: