Как зафиксировать в jooml'e верхнее меню при скроле вниз?

Работаю с сайтом test.vip-photo.com.ua/index.php/ru .
Нужно что-бы при скроле вниз, верхнее меню id="mainmenu" фиксировалось вверху. Подключил jquery .

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

Протестировал- работает. Подключил джава скрипт файл myscript.js

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

а так-же добавил ксс стиль

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

.Не могу понять, почему не фиксируется меню при скролинге.