Top Left Text cha

Website Development Services

Include jQuery if it's not already.

This will remove the class when you scroll back up.  Change '100' to whatever you want the scroll value to be.

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $(".initialStyle").addClass("additionalStyle");
            } else {
                $(".initialStyle").removeClass("additionalStyle");
            }
        });

 Replace 'initialStyle' and 'additionalStyle'.

Here's a full page example:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        div {
            height:100px;
        }
        .test {
            background:#0000ff;
        }
        .test2 {
            background:#ff0000;
        }
        .test3 {
            background:#00ff00;
        }
        .testicles {
            background:#000000;
        }
    </style>

    <script>
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $(".test2").addClass("testicles");
            } else {
                $(".test2").removeClass("testicles");
            }
        });
    </script>
</head>
<body style="height:2000px;margin-top:200px;">

<div class="test" id="test">
    </div>
<div class="test2" id="test2">
</div>
<div class="test3" id="test3">
</div>
<div class="test4" id="test4">
</div>
</body>

 

Add comment


Security code
Refresh

  • No comments found

Leave your comments

Post comment as a guest

0
Your comments are subjected to administrator's moderation.
X