执行随机css更改

Question

$(window).scroll(function() {
  if ($(window).scrollTop() > 200) {
    $('#box').css({height:'100px', background-color:'green', overflow:'visible', width:'550px', margin:'0 auto'
  });

  $('#box2').css({position:'fixed',left:'400px',height:'200px',background: '#CF0'});
}

我是javascript新手，这可能是一个简单的问题。。。

我在这里所做的是修改div（#box）的css样式，这取决于你所在页面的位置（

我试图实现的是向#box添加多个css更改，并每次执行一个随机更改。例如，每次从最顶端滚动通过200，div的显示高度为：绿色背景为“100px”，蓝色背景为“200px”，或红色背景为“300px”。希望这有意义。。。。

Answer 1

您可以尝试类似的方法（调整滚动顶值和css样式）

JS：

var classes = ['a', 'b', 'c'];
$(window).scroll(function() {
    if ($(window).scrollTop() > 20) {
        var cls = classes[Math.floor( Math.random() * classes.length )];
        $('#box').toggleClass(cls);
    }
 });

CSS:

.a {
    background:red;
    height:100px;
}
.b {
    background:green;
    height:200px;
}
.c {
    background:blue;
    height:300px;
}

演示。

更新：每scrolldowm

$(function(){
    var classes = ['a', 'b', 'c'];
    function down()
    {
        if ($(window).scrollTop() > 20 ) {
            var cls = classes[Math.floor( Math.random() * classes.length )];
            $('#box').toggleClass(cls);
            $(window).off('scroll.down');
        }
    }

    $(window).on('scroll.down', down).on('scroll.up', function(){
        if ($(window).scrollTop() < 20 ) {
            $(window).on('scroll.down', down);
        }
    });
});

演示。