1
I am working on a site that the HTML Menu is not alterable. I want that when the user scrolls from the mouse to the menu bar, it becomes fixed at the top of the page, respecting the distance of another bar that is working and already fixed automatically.
MENU HTML (Not changeable):
<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Ê" title="" target="" class="" href="/p/23834-comite-2018">
COMITÊ
</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ÇÕES SIENPRO" title="" target="" class="empty-href">
EDIÇÕ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ÃO" title="" target="" class="empty-href">
REGRAS PARA SUBMISSÃO
</a>
</li>
<li id="menu_item_41619" class="">
<a alt="ORIENTAÇÃO PARA APRESENTAÇÃO" title="" target="" class="empty-href">
ORIENTAÇÃO PARA APRESENTAÇÃO
</a>
</li>
</menu>
</li>
<li id="menu_item_41620" class="">
<a alt="PROGRAMAÇÃO" title="" target="" class="empty-href">
PROGRAMAÇÃO
</a>
</li>
<li id="menu_item_41621" class="">
<a alt="LOCAL" title="" target="" class="empty-href">
LOCAL
</a>
</li>
</menu>
</div>
CSS of the attachment variable:
.fixar{
position: fixed;
width: 100%;
top: 37px;
z-index: 999;
}
Javascript to try to fix the menu:
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');
}
});
});
I thought Javascript was right, but it’s not working at all. Link to access the website: https://sienpro.catalao.ufg.br/
I don’t know if it’s class I’m trying to change that is wrong, if it’s class <nav>, of <div>, or of <menu> that I have to change with javascript,
or if it has to be a cascade between them all.
Apparently you didn’t load the jQuery library into the code
– Sam
@Leandroangelo His question contains the code almost equal to the answer, her problem is only the lack of incorporation of the
Jquery– I_like_trains
Can anyone tell me how to do that? kkkk I am totally Noob in Javascript, neither css and html I know right. I learned by copying and pasting from one site to another.
– Lucas Shimura
Ah thanks, I decided by putting <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> before the </head>.
– Lucas Shimura
If anyone needs it. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
– Lucas Shimura