根据页面上的位置设置随机类

Set a random class depending on position on page

本文关键字：位置 设置 随机      更新时间：2023-09-26

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 的样式。在这种情况下，当您滚动 pass 20 时，它将更改为这 3 个条件之一（绿色背景 100px/黄色背景 200px/红色背景 300px）。它在演示中进行随机样式更改，但是当您滚动时它会不断更改样式。有没有办法让它在滚动通过该点后保持随机选择的样式？

使用

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

小提琴：http://jsfiddle.net/ck5fa/2/

相关文章：