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显示为高度：'100px'，绿色背景，高度：'200px'，蓝色背景，或高度：'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;
}

DEMO.

更新：每{？1}}

只切换一次

scrolldowm

DEMO.

执行随机css更改

1 个答案: