javascript - 执行随机 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 新手，这也可能是一个快速的问题......

我在这里所做的是根据您所在页面的位置（在本例中为 > 200）修改 div 的 css 样式（#box）。

我想要实现的是将多个 css 更改添加到 #box 并每次执行一个随机更改。例如，每次从最顶部滚动 200 时，div 会出现在 height:'100px' 和绿色背景、 height:'200px' 和蓝色背景或 height:'300px' 和红色背景中。希望这有意义....

Answer 1

你可以尝试这样的事情（调整你的scrollTop价值和css style）

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);
        }
    });
});

演示。