Add/Remove classes from html elements based on scroll

$(document).ready(function() {

    /**
     * this can be optimized, because the classes are being removed in every scroll!
     * optimized solution: http://stackoverflow.com/a/26016327/720484
     */
    var addRemoveTopPanelClassesOnScroll = function() {
        var scrollValue = $(document).scrollTop()

        if(scrollValue > 0) {
            $(".logoimgwrapper").addClass("logoimgwrapper_small")
            $(".logoimg").addClass("logoimg_small")
            $(".logotext").addClass("logotext_small")
            $(".logosmalltext").addClass("logosmalltext_small")

            $(".mainmenu_item").addClass("mainmenu_item_small")
            $(".menuitem_subtitle").addClass("menuitem_subtitle_small")

        } else {
            $(".logoimgwrapper").removeClass("logoimgwrapper_small")
            $(".logoimg").removeClass("logoimg_small")
            $(".logotext").removeClass("logotext_small")
            $(".logosmalltext").removeClass("logosmalltext_small")

            $(".mainmenu_item").removeClass("mainmenu_item_small")
            $(".menuitem_subtitle").removeClass("menuitem_subtitle_small")
        }

        return scrollValue
    }

    //$(window).scroll(addRemoveTopPanelClassesOnScroll)
    //it is NOT working, because on page load we have the top panel maximized while it is already scrolled
    /*$(window).bind('scroll',function(e){
        addRemoveTopPanelClassesOnScroll();
    }).scroll();*/
})