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 的新手，这可能是一个快速的问题......

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

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

Answer 1

您可以尝试这样的事情(调整您的scrollTop 值和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;
}

DEMO.

更新:每 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);
        }
    });
});

DEMO.