JavaScript的:
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;
}
我在这里要做的是根据您所在的滚动位置修改div的样式。在这种情况下,当您滚动传递20时,它将更改为这三个条件之一(绿色背景中100px /黄色背景中200px /红色背景中300px)。它在演示中进行随机样式更改,但是在滚动时会不断更改样式。滚动传递该点后,有没有办法让它保持随机选择的样式?
答案 0 :(得分:2)
使用on
设置命名事件,并在更改课程后使用off
将其停用。
var classes = ['a', 'b', 'c'];
$(window).on('scroll.changeClass', function() {
if ($(this).scrollTop() > 20) {
var cls = classes[Math.floor( Math.random() * classes.length )];
$('#box').toggleClass(cls);
$(this).off('.changeClass'); // remove the event as we are done here
}
});