CODEWITHSUNDEEP
jquerycss
Cloudboy22
Cloudboy22

Reputation: 1514

Changing background color on scrolling at a certain position

i was working on this and what i am doing is i am changing background color on certain position on scrolling. Now it's working fine till red color but then again the green color is not showing up. here is the code

    $(document).ready(function () {
        var scroll_pos = 0;
        $(document).scroll(function () {
            scroll_pos = $(this).scrollTop();

            if (scroll_pos < 210) {
                $("body").css('background-color', 'black');
            }
            else if (scroll_pos > 210) {
                $("body").css('background-color', 'red');
            }
            else if (scroll_pos > 410) {
                $("body").css('background-color', 'orange');

            }

            else if (scroll_pos > 710) {
                $("body").css('background-color', 'green');

            }

        });
    });

And here is the Fiddle Fiddle Here

Please tell me if i am doing something wrong with if else. Thanks.

Upvotes: 0

Views: 299

Answers (3)

Sridhar R
Sridhar R

Reputation: 20418

Try this

$(document).ready(function () {
            var scroll_pos = 0;
            $(document).scroll(function () {
                scroll_pos = $(this).scrollTop();

                if (scroll_pos < 210) {
                    $("body").css('background-color', 'black');
                }
                else if (scroll_pos > 210 && scroll_pos < 410) {
                    $("body").css('background-color', 'red');
                }
                else if (scroll_pos > 410 && scroll_pos < 710) {
                    $("body").css('background-color', 'orange');

                }

                else if (scroll_pos > 710) {
                    $("body").css('background-color', 'green');

                }
                console.log(scroll_pos)

            });
        });

DEMO

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13344

I would solve it like so:

    $(document).ready(function () {
        var scroll_pos = 0;
        var color = 'black';
        $(document).scroll(function () {
            scroll_pos = $(this).scrollTop();

            if (scroll_pos < 210) {
                color = 'black';
            }
            if (scroll_pos > 210) {
                color = 'red';
            }
            if (scroll_pos > 410) {
                color = 'orange';
            }
            if (scroll_pos > 710) {
                color = 'green';
            }
            $("body").css('background-color', color );

        });
    });

Store the color to use in the variable. Change the variable as the condition gets larger. Apply the variable as background-color property at the end. No need to compare if greater and smaller, just build greater in the order of comparison.

Fiddle here: http://jsfiddle.net/x69xm/4/

Upvotes: 1

Rahul Desai
Rahul Desai

Reputation: 15501

Working Fiddle

You need to add additional conditions to the if statements to limit the background-color to the scroll_pos.

            if (scroll_pos < 210) {
                $("body").css('background-color', 'black');
            }
            else if (scroll_pos > 210 && scroll_pos < 410) {
                $("body").css('background-color', 'red');
            }
            else if (scroll_pos > 410 && scroll_pos < 710) {
                $("body").css('background-color', 'orange');
            }
            else if (scroll_pos > 710) {
                $("body").css('background-color', 'green');

            }

Upvotes: 1

Related Questions