Edit in JSFiddle

$(document).ready(function () {

    var menu = $('menu');
    var origOffsetY = menu.offset().top;
    var aside = $('aside');
    var maxOffsetY = aside.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY && $(window).scrollTop() <= maxOffsetY) {
            $('menu').removeClass('stickouz');
            $('menu').addClass('sticky');

        } else if ($(window).scrollTop() >= maxOffsetY) {
            $('menu').addClass('stickouz');
        } else {
            $('menu').removeClass('stickouz');
            $('menu').removeClass('sticky');
        }


    }

    document.onscroll = scroll;

});
<header></header>
<menu></menu>
<main></main>
<aside></aside>
* {
    font-family:arial;
    margin:0;
    padding:0;
}
header {
    height: 200px;
    background: red;
}
main {
    height: 2000px;
    background: yellow;
}
aside {
    background: grey;
    height: 2000px;
}
menu {
    background: blue;
    height:50px;
    width:100%;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
menu.sticky {
    background: aqua;
    position:fixed;
    top:0;
}
menu.sticky.stickouz {
    margin-top: -50px;
}