how to change css when scroll reaches a certain element

I have a sidebar which is fixed and remains static when the page scrolls. My issue is that even remains static when scroll hits footer which makes it goes under the footer. What I want is to change it's position property when scroll reaches footer.

Here is what I tried

<div class="left_sidebar fixme _resultFilter _resultFilter_fix" ng-show="gsaFilterShow && gsaFilterFilled" style="
                z-index: 1;
                border: 4px solid #dedcdd;
                overflow-x: hidden;
                overflow-y: scroll;">
    <p>This is a div</p>
</div>

<script>
    var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

    $(window).scroll(function () {                  // assign scroll event listener

        var currentScroll = $(window).scrollTop(); // get current position


        if (currentScroll >= fixmeTop) {           // apply position: fixed if you
            $('.fixme').css({                      // scroll to that element or below it
                width: '222px',
                position: 'fixed',
                height: '80%',
                bottom: '400px',
                top: '80px',

            });
        } else if ($(window).scrollTop() >= $('.footer-top').offset().top) {         // apply position: fixed if you
            $('.fixme').css({                      // scroll to that element or below it
                position: 'relative',
                width: '500px'
            });
        }
        else {                                   // apply position: static
            $('.fixme').css({                      // if you scroll above it
                position: 'relative',
                top: '80px'
            });
        }
    });

</script>