Execute random css alterations

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

I am new to javascript, this might as well be a quick question...

What I have here is modifying the css styles of a div (#box) depending on the location of the page you are on (> 200 in this case).

What I am trying to achieve is to add multiple css alterations to #box and to execute a random one each time. For example each time you scroll pass 200 from the very top, the div appears either in height:'100px' with green background, height:'200px' with blue background, OR height:'300px' with red background. Hope this make sense....

The code you posted seems to be doing that. What's the problem you're having? — bfavaretto
– bfavaretto, Commented Nov 1, 2013 at 18:11
Yeah it works, but I want to add random css multiple alterations to one of the divs, and I have trouble looking for a solution to that, thank you — user2945861
– user2945861, Commented Nov 1, 2013 at 18:13
You have to be more specific... What do you want to be random? Did you try anything? Do you know how to generate a random number with js? — bfavaretto
– bfavaretto, Commented Nov 1, 2013 at 18:28
Sorry if the question was vague. So what I want is to execute either one of these 3 different css variables. Not a random number. 1. 100px in green background 2. 200px in yellow background 3. 300px in red background — user2945861
– user2945861, Commented Nov 1, 2013 at 18:37

The Alpha · Accepted Answer · 2013-11-02 06:15:02Z

1

You may try something like this (adjust your scrollTop value and 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.

Update : toggles only once every 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.

edited Nov 2, 2013 at 6:15

answered Nov 1, 2013 at 18:37

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2945861 Over a year ago

Thanks! Seems to be working...however it's constantly changing the class as you scroll. I meant to it stay at a particular class of the three.

user2945861 Over a year ago

Thanks! Seems to be working...however it's constantly changing the class as you scroll. I meant for it to stay at a particular class of the three. @RCV

Collectives™ on Stack Overflow

Execute random css alterations

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related