Fixar barra de Menu no Topo (Ajuda com erro em Javascript)

Olá, estou trabalhando em um site que o HTML do Menu não é alterável. Eu quero que quando o usuário rolar o scroll do mouse até a barra de menu, ela se torne fixa no topo da página. Respeitando a distância de outra barra que está funcionando e já se fixa automaticamente.

HTML do MENU (Não alterável):

<nav class="menu_component" id="component_37548">
	<div class="menu-head">
 <span>
 Menu
 </span>
 <button class="hamburger hamburger--spin-r" type="button">
 <span class="hamburger-box">
 <span class="hamburger-inner">
 </span>
 </span>
 </button>
	</div>
	<div class="menu-panel">
 <menu class="expanded hamburger-menu">
 <li id="menu_item_39037" class="sub">
 <a alt="O SIENPRO" title="" target="" class="empty-href">
 O SIENPRO
 </a>
 <menu class="submenu">
 <li id="menu_item_41614" class="">
 <a alt="SOBRE" title="" target="" class="" href="/p/21374-sobre-o-sienpro">
 SOBRE
 </a>
 </li>
 <li id="menu_item_39038" class="">
 <a alt="COMIT&Ecirc;" title="" target="" class="" href="/p/23834-comite-2018">
 COMIT&Ecirc;
 </a>
 </li>
 </menu>
 </li>
 <li id="menu_item_41615" class="">
 <a alt="TEMA" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#tema">
 TEMA
 </a>
 </li>
 <li id="menu_item_41616" class="">
 <a alt="PRINCIPAIS DATAS" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#datas">
 PRINCIPAIS DATAS
 </a>
 </li>
 <li id="menu_item_39040" class="sub">
 <a alt="EDI&Ccedil;&Otilde;ES SIENPRO" title="" target="" class="empty-href">
 EDI&Ccedil;&Otilde;ES SIENPRO
 </a>
 <menu class="submenu">
 <li id="menu_item_41593" class="">
 <a alt="I SIENPRO - 2017" title="" target="" class="" href="/p/23811-i-sienpro-2017">
 I SIENPRO - 2017
 </a>
 </li>
 <li id="menu_item_41605" class="">
 <a alt="II SIENPRO - 2018" title="" target="" class="" href="/p/23814-ii-sienpro-2018">
 II SIENPRO - 2018
 </a>
 </li>
 </menu>
 </li>
 <li id="menu_item_39041" class="">
 <a alt="CONTATO" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#contato">
 CONTATO
 </a>
 </li>
 <li id="menu_item_41617" class="sub">
 <a alt="ARTIGOS" title="" target="" class="empty-href">
 ARTIGOS
 </a>
 <menu class="submenu">
 <li id="menu_item_41618" class="">
 <a alt="REGRAS PARA SUBMISS&Atilde;O" title="" target="" class="empty-href">
 REGRAS PARA SUBMISS&Atilde;O
 </a>
 </li>
 <li id="menu_item_41619" class="">
 <a alt="ORIENTA&Ccedil;&Atilde;O PARA APRESENTA&Ccedil;&Atilde;O" title="" target="" class="empty-href">
 ORIENTA&Ccedil;&Atilde;O PARA APRESENTA&Ccedil;&Atilde;O
 </a>
 </li>
 </menu>
 </li>
 <li id="menu_item_41620" class="">
 <a alt="PROGRAMA&Ccedil;&Atilde;O" title="" target="" class="empty-href">
 PROGRAMA&Ccedil;&Atilde;O
 </a>
 </li>
 <li id="menu_item_41621" class="">
 <a alt="LOCAL" title="" target="" class="empty-href">
 LOCAL
 </a>
 </li>
 </menu>
	</div>
</nav>

	 

	CSS da variável de fixação:

.fixar{
 position: fixed;
 width: 100%;
 top: 37px;
 z-index: 999;
}

	 

	Javascript para tentar fixar o menu:

<script type="text/javascript">

jQuery("document").ready(function($){
	var offset = $('.menu_component').offset().top;
	var nav = $('.menu_component');

$(document).on('scroll', function () {
 if (offset <= $(window).scrollTop()) {
 nav.addClass('fixar');
 } else {
 nav.removeClass('fixar');
 }
	});

});

</script>

	 

	 

	Pensei que estava certo o Javascript, mas não está funcionando de maneira alguma. Link para acessar o site: [https://sienpro.catalao.ufg.br/](https://sienpro.catalao.ufg.br/)

	Não sei se é classe que estou tentando alterar que está errada, se é classe da** <nav>**, da** <div>**, ou do** <menu> **que eu tenho que alterar com o javascript. Ou se tem que ser uma cascata entre todas elas.

	Desde já, agradeço.