How to wrap my script into one function? The professional approach?
<p>right now I'm working on a little training-code. Trying to code a semi-fixed page-element. This is my result by now: </p>

<pre><code>$(document).ready(function () {
    var elementPosition = $("#header").offset();
    var elementHeight = $("#header").outerHeight();
    $("#header").before("&lt;div id='placeholder' style='display:none; height:" + elementHeight + "px'&gt;&lt;/div&gt;");
    $(window).scroll(function () {
        checkAttached("#header");
    });

    function checkAttached(element) {
        var windowDepth = $(window).scrollTop();
        if (windowDepth &gt;= elementPosition.top) {
            $(element).addClass("attached");
            $("#placeholder").css("display", "block");
        } else {
            $(element).removeClass("attached");
            $("#placeholder").css("display", "none");
        };
    };
});
</code></pre>

<p><a href="http://jsfiddle.net/9xM3W/" rel="nofollow">http://jsfiddle.net/9xM3W/</a></p>

<p>The thing is, I'm not quite happy with the solution. I would like it to be a little more flexible. My goal is an independent function that allows to address various page elements. Something like this:</p>

<pre><code>attachThis(element);
</code></pre>

<p>Right now I'm having trouble with the scroll-event. I can't have this inside a function, can I? Further I don't know a good solution for not-overwriting "elementPosition". My current solution is to define it outside the function. Not very clean.</p>

<p>Of course I'm not expecting you to deliver a better script, but maybe you can push me into the right direction and point out a suitable technique for me? I Would love to know how a professional would approach this task.</p>
