Pin Menu Bar on Top

Question

Pin Menu Bar on Top

Navigation

#1 by (0 votes)

1

I'm working on a website that the HTML menu is not changeable. I want when the user scrolls the scroll bar up to the menu bar, it becomes fixed at the top of the page, respecting the distance of another bar that is working and is already set 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&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>

Fixing Variable CSS:

.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 the Javascript was right, but it's not working at all. Link to the site: link

I do not know if it's a class I'm trying to change that is wrong, whether it's a class of <nav> , <div> , or <menu> that I have to change with javascript, or if it has to be a cascade between all of them.

javascript html css

asked by anonymous 12.03.2018 / 18:42

1 answer

Insert data into related tables using PDO how to make a chart in excel vba in the form of goals?

score 0 · Accepted Answer

Young man can solve this with CSS only.

You can put position:fixed and top:0 on the first Bar and on the second use Bar use position:sticky and top:50px (50px is the height of the first Bar, so one does not stay on top of the other)

See a simple example of how the result looks.

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0;
}
body {
    padding-top: 60px;
}
section{
    width: 100%;
    height: auto;
    position: relative;
}
p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px 80px;
}
h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
    text-align: center;
    background-color: black;
    margin: 0;
    padding: 0;
    height: 50px;
}
.cor {
    font-size: 32px;
    background-color: red;
    position: sticky;
    z-index: 11;
    top: 50px;
}
.topo {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
}

<h1 class="topo">Barra #1</h1>
<section>
    <h3>Teste barra</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
</section>
<section>
    <h1 class="cor">Barra #2</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
</section>