Fix element on window scroll This code achieves the effect, but is it a resource friendly way of doing it?

Just to clarify: target div.fixMe and fix it to the top of the window when the user scrolls past its natural position. (I do realise there are plugins to achieve this result, but I wanted to build it myself)

Is this the best way to achieve the desired result? Is it a good idea that the whole function triggers whenever the user scrolls, or should I be splitting up code?

(function() {
var fixedElement = $('.fixMe').offset(),
    scrolled = $(window).scroll(function() {
        var winScrolled = $(this).scrollTop();
        if(winScrolled &gt; fixedElement.top - 10) {
            $('.fixMe').css({'position': 'fixed','top' : '10px'})
        }
        else {
            $('.fixMe').css({'position': 'static'})
        }
    });
})()


Any feedback/criticism is welcome. I should probably get/set the width of div.fixMe to avoid display issues.
Two things I noticed/would recommend:


Cache jQuery variables such as $(this) and $('.fixMe') to prevent redundant lookups during each scroll event.
Implement an event debouncer/limiter, this is because the scroll event fires a lot more than you likely think it does. There are many utils/plugins to achieve this such as:

https://github.com/cowboy/jquery-throttle-debounce
http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
http://documentcloud.github.com/underscore/



I even wrote a very simple one: http://limit.gotsomething.com/. My site will show you why debouncing/limiting is useful.

Other than that looks good to me!

cheers,
Marc.