I have a script in PHP where i'm defining the menus and navbars of the website. I have a top menu that when you scroll down the page, it gets fixed to the top of the page. I want to have a second menu on the left "glued" to the top menu. The way I have done it, it goes well when the top menu reaches the top of the page, it gets fixed with the left menu like I want. The problem is that if the top menu doesnt reach the top of the page (like if it's just a little bit of scroll), the left menu doesnt get stick to the top menu.
The top menu is the one that has "Inicio", "Instrucciones" etc. The left menu is the one that has "Nueva cata", "Nueva cerveza", etc.
This is the page at the beginning (0 scroll).
This is the page after the top menu reaches the top of the page (>200 scroll).
This is the page before the top menu reaches the top of the page (0 < scroll < 200).
As you can see in the third page, the left menu goes down with the scroll instead of going up with the top menu.
This is HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" style="width: 200px;"></div>
<a href="user.php" class="navbar-brand">
<p>Inicio</p>
</a>
<a href="instrucciones.php" class="navbar-brand">
<p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand">
<p>Contacto</p>
</a>
<a href="faq.php" class="navbar-brand">
<p>FaQ</p>
</a>
<a href="ajax/logout.php" class="navbar-brand">
<p><i class="fas fa-sign-out-alt"></i> Salir</p>
</a>
</nav>
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php">
<p>Nueva Cata</p>
</a>
<a href="nueva_cerveza.php">
<p>Nueva Cerveza</p>
</a>
<a href="cata.php">
<p>Mis catas</p>
</a>
<a href="mis_cervezas.php">
<p>Mis cervezas</p>
</a>
<a href="mis_amigos.php">
<p>Mis amigos</p>
</a>
</nav>
This is CSS:
#menu_izq {
height: 100%;
width: 200px;
position: fixed;
left: 0;
top: 252px;
z-index: 3;
background-color: #503522;
overflow-x: hidden;
padding-top: 20px;
}
#menu_arriba{
background-color: #503522;
width: 100%;
z-index: 1;
}
This is my JQuery:
$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
$("#menu_izq").css('position','fixed').css('top', '35');
} else {
$('#menu_arriba').css('position','initial');
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
$("#menu_izq").css('top', '250');
}
});
I know the problem is in the JQuery method but i don't get to write what I want. Thank you very much.
----- EDIT
The way I'm doing my website is with a menus.php where I write the top and left menu like this
<?php function izquierda() { ?>
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php"><p>Nueva Cata</p></a>
<a href="nueva_cerveza.php"><p>Nueva Cerveza</p></a>
<a href="cata.php"><p>Mis catas</p></a>
<a href="mis_cervezas.php"><p>Mis cervezas</p></a>
<a href="mis_amigos.php"><p>Mis amigos</p></a>
</nav>
<?php } ?>
<?php function arriba() { ?>
<nav class="navbar navbar-expand-lg navbar-light bg-light"
id="menu_arriba">
<div class="navbar-brand" style="width: 200px;"></div>
<a href="user.php" class="navbar-brand"><p>Inicio</p></a>
<a href="instrucciones.php" class="navbar-brand"><p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand"><p>Contacto</p></a>
<a href="faq.php" class="navbar-brand"><p>FaQ</p></a>
<div class="navbar-brand" style="width: 450px;"></div>
<a href="ajax/logout.php" class="navbar-brand"><p><i class="fas fa-sign-
out-alt"></i> Salir</p></a>
</nav>
So in the actual pages of the website, i just write:
<?php echo banner(); ?>
<?php echo arriba(); ?>
<?php echo izquierda(); ?>
<div class="main">
// HERE GOES THE CONTENT OF THE PAGE
</div>
I edit this to make you know that the reason of menu_izq is position: fixed is because like that, it shows the content of the page to the right of the left menu, and in position: sticky||relative, the content is shown at the end of the menu. I need to find a solution without changing (I think) the position: fixed of the menu_izq (left menu).