【发布时间】：2020-11-09 22:03:45
【问题描述】：
我有一个 PHP 脚本，用于定义网站的菜单和导航栏。我有一个顶部菜单，当您向下滚动页面时，它会固定在页面顶部。我想在左侧“粘”到顶部菜单的第二个菜单。我这样做的方式是，当顶部菜单到达页面顶部时效果很好，它会像我想要的那样被左侧菜单固定。问题是如果顶部菜单没有到达页面顶部（就像它只是一点点滚动），左侧菜单不会粘在顶部菜单上。
顶部菜单是具有“Inicio”、“Instrucciones”等的菜单。左侧菜单是具有“Nueva cata”、“Nueva cerveza”等的菜单。
这是顶部菜单到达页面顶部之前的页面（0
正如您在第三页中看到的那样，左侧菜单随着滚动而下降，而不是随着顶部菜单上升。
这是 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>
这是 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;
}
这是我的 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');
}
});
我知道问题出在 JQuery 方法中，但我没有写出我想要的东西。非常感谢。
----- 编辑
我做我的网站的方式是使用 menus.php，我在其中编写这样的顶部和左侧菜单
<?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>
所以在网站的实际页面中，我只写：
<?php echo banner(); ?>
<?php echo arriba(); ?>
<?php echo izquierda(); ?>
<div class="main">
// HERE GOES THE CONTENT OF THE PAGE
</div>
我编辑这个是为了让你知道menu_izq的原因是position: fixed是因为这样，它在左侧菜单的右侧显示了页面的内容，而在position: sticky||relative中，内容是显示在菜单的末尾。我需要在不改变（我认为）menu_izq（左侧菜单）的position: fixed 的情况下找到解决方案。
【问题讨论】：
-
如果您要上传 HTML 网页的代码 sn-p，我将能够为您提供更好的帮助。对于这样的意图，我怀疑是否需要 JQuery 甚至 JS。谢谢！
标签： javascript html jquery css-position