How to add css class using on scroll

Question

how to add class into div using on scroll in magento.

i have javascript like this

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

    if (scroll >= 100) {
        $j(".page-header").addClass("header-bar");
    } else {
        $j(".page-header").removeClass("header-bar");
    }
});

that javascript will add or remove header-bar class from div with page-header class in it. it look like this <header id="header" class="page-header"> will become <header id="header" class="page-header header-bar">if i scroll down the page.

I tried using single html file, it is working perfectly, but then when i apply it in magento, it is not working, but no error message displayed.

The way i apply it into magento is like this:

First, i put that javascript into one file named header-effect.js and i store the file in skin\frontend\rwd\default\jsfolder. After that, i add header-effect.js in page.xml <action method="addItem"><type>skin_js</type><name>js/header_effect.js</name></action>

I clear magento cache, refresh the page, scroll down the page but nothing is happen, i check page source and header-effect.js is loaded.

Am i doing it correctly?