My mobile menu is fixed at the top, but the dropdown follows its scroll, what to do?

Good afternoon

I am creating a responsive website manually, so I created 2 menus, one to appear on the desktop and another to mobile version. These menus are not on top, but about 150 pixels away. I then decided to create a script that allows me to set the menu after the scroll reaches those 150px; Follow the code

    $(document).ready(function(){
    var menu = $('.menu-geral-desktop');
    function scroll() {
        if ($(window).scrollTop() > 150) {
            $('.menu-geral-desktop').addClass('menu-fixo-desk').fadeIn(500);
            $('.menu-geral-desktop').fadeIn( );
            $('.brand-topo-desk').css('display','block');
            $('.itens-menu-desk').addClass('css-menu-centro-desk');
            $('.menu-geral-mobile').addClass('menu-fixo-desk').fadeIn(500);
        } else {
            $('.menu-geral-desktop').removeClass('menu-fixo-desk'); 
            $('.brand-topo-desk').css('display','none', 500);
            $('.itens-menu-desk').removeClass('css-menu-centro-desk');
            $('.menu-geral-mobile').removeClass('menu-fixo-desk'); 
        };
    };

    document.onscroll = scroll;    
});

On the desktop is working properly, the problem is in the mobile menu. The menu itself is fixed at the top after scrolling the 150 pixels, however when I open the dropdown, when scrolling the page, the options scroll along with the scroll, even the menu itself being fixed at the top. It should be some configuration in CSS. Following is the styling of the mobile menu.

    .itens-menu-mob{
    float: left;
    width: 100%;
    margin-top: 00px;
    z-index: 100000!important;
    background-color: rgba(50,151,163,1.00);
    display: none;
}

Can anyone help me?