Sticky element for a sidebar widget I have this JavaScript to make a sidebar widget stick to a fixed position once the page is scrolled down, once you scroll to the bottom of the page where the footer div is I then un-sticky it so that the stickied div does not overlap the footer.

It works great but I am not very good with JavaScript, so I am hoping to clean it up because it looks sloppy.

JavaScript

$(window).load(function () {
/*-----------------------*/
 * Fixed Widget on Scroll
 *-----------------------*/

    // set some Div vars
    var stickyID = $("#sticky-scroll-wrapper"),
        footerID = $('#footer'),
        stickyDivHeight = stickyID.outerHeight(),
        stickyIDMargin = 70;

    $(window).scroll(function () {
        var currentPosition = $(document).scrollTop() + stickyIDMargin;
        var stickyIDPosition = stickyID.offset().top;

        // cut off point/un sticky when we reach this far down the page
        var limit = footerID.offset().top - stickyDivHeight;

        //determines whether sidebar should stick and applies appropriate settings to make it stick
        if (currentPosition &gt;= stickyIDPosition &amp;&amp; currentPosition &lt; limit) {
            $('#sticky-elements').css({
                'position': 'fixed',
                'top': '70px'
            });
        } else {
            $('#sticky-elements').css({
                'position': 'static',
            });
        }
        // Un-stick once we reach the #fotter section of the page to prevent overlapping
        if (limit &lt; currentPosition) {
            var diff = limit - currentPosition;
            $('#sticky-elements').css({
                'top': diff + stickyIDMargin,
                'position': 'fixed',
            });
        }

    });




});


HTML

&lt;div id="sticky-scroll-wrapper"&gt;
    &lt;div id="sticky-elements" style="position: static; "&gt;sidebar content&lt;/div&gt;
&lt;/div&gt;
I can make a small improvement in your logic structure that may make a very small improvement in performance. If limit &lt; currentPosition, all you need to do is that code block, and you can use else if and remove testing its opposite. See code:

$(window).load(function () {
/*-----------------------*/
 * Fixed Widget on Scroll
 *-----------------------*/

    // set some Div vars
    var stickyID = $("#sticky-scroll-wrapper"),
        footerID = $('#footer'),
        stickyDivHeight = stickyID.outerHeight(),
        stickyIDMargin = 70;

    $(window).scroll(function () {
        var currentPosition = $(document).scrollTop() + stickyIDMargin;
        var stickyIDPosition = stickyID.offset().top;

        // cut off point/un sticky when we reach this far down the page
        var limit = footerID.offset().top - stickyDivHeight;

        // Un-stick once we reach the #fotter section of the page to prevent overlapping
        if (limit &lt;= currentPosition) {
            var diff = limit - currentPosition;
            $('#sticky-elements').css({
                'top': diff + stickyIDMargin,
                'position': 'fixed',
            });
        }
        //determines whether sidebar should stick and applies appropriate settings to make it stick
        else if (currentPosition &gt;= stickyIDPosition) {
            $('#sticky-elements').css({
                'position': 'fixed',
                'top': '70px'
            });
        }
        else {
            $('#sticky-elements').css({
                'position': 'static',
            });
        }
    });

});


Also, you might consider consolidating var diff = limit - currentPosition; with 'top': diff + stickyIDMargin if you are comfortable with that.
Otherwise, it looks great to me. :)