How to fix top menu in jooml when scrolling down?

Question

css

I work with the site test.vip-photo.com.ua/index.php/ru .
It is necessary that when scrolling down, the top menu id="mainmenu" was fixed at the top. I have included jquery.

$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/myscript.js' );
$document->addScript( '/media/system/js/jquery-3.2.1.min.js' );

Tested - works. Connected java script file myscript.js

jQuery(function($) {
        $(window).scroll(function(){
            if($(this).scrollTop()>140){
                $('#mainmenu').addClass('fixed');
            }
            else if ($(this).scrollTop()<140){
                $('#mainmenu').removeClass('fixed');
            }
        });
    });

and also added css style

#mainmenu.fixed{
      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(239, 5, 5, 0.95);
  }

.I can not understand why the menu is not fixed when scrolling.

Answer 1

Already solved the problem? Because I look at it works prntscr.com/fgf5f8