动画导航与另一个导航一起移动

Question

我在 PHP 中有一个脚本，我在其中定义网站的菜单和导航栏。我有一个顶部菜单，当您向下滚动页面时，它会固定在页面顶部。我想在左侧“粘”到顶部菜单的第二个菜单。我这样做的方式，当顶部菜单到达页面顶部时，它会顺利进行，它会像我想要的那样固定在左侧菜单中。问题是如果顶部菜单没有到达页面顶部（比如它只是一点点滚动），左侧菜单不会粘在顶部菜单上。

顶部菜单是“Inicio”、“Instrucciones”等菜单。左侧菜单是“Nueva cata”、“Nueva cerveza”等菜单

这是开头的页面（0 滚动）。

这是顶部菜单到达页面顶部（>200 滚动）后的页面。

这是顶部菜单到达页面顶部之前的页面 (0 < scroll < 200)。

正如您在第三页中看到的那样，左侧菜单随着滚动条向下移动，而不是随着顶部菜单向上移动。

这是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 的情况下找到解决方案。

Answer 1

看起来您正在使用 Bootstrap。目前，您的左侧导航最初设置为 position: fixed，我建议您最初使用 position: relative 到您的左侧导航，以便定位您的 nav 元素可以 relative 的高度背景图片。使用 Bootstrap，此解决方案将左侧导航和内容包装在一个 flex 容器中，以便内容可以轻松地相对于此容器定位，因为稍后导航将获得 position: fixed.

基本上在脚本上，只需检测滚动条顶部的 Y 位置是否已经超过背景图像元素的 height。如果是，请将 fixed 位置分配给导航元素，并根据需要调整内容相对于包装左侧导航和内容的容器的位置。检查涉及 .navs-are-fixed 的 CSS 属性以查看导航如何分配到 fixed 位置。

$(window).scroll(function() {

  // innerHeight is used to include any padding
  var bgImgHeight = $('.some-bg-img').innerHeight();

  // if the the scroll reaches the end of the background image, this is when you start to assign 'fixed' to your nav elements
  if ($(window).scrollTop() >= bgImgHeight) {
    $('body').addClass("navs-are-fixed");
  } else {
    $('body').removeClass("navs-are-fixed");
  }
});

#menu_izq {
  height: 100%;
  width: 200px;
  position: relative;
  left: 0;
  top: 0;
  z-index: 3;
  background-color: #503522;
  overflow-x: hidden;
  padding-top: 20px;
}

#menu_arriba {
  background-color: #503522;
  width: 100%;
  z-index: 1;
  position: relative;
  top: 0;
}

body {
  background-color: #ffc75a !important;
  height: 300vh; /* sample arbitrary value to force body scrolling */
}

.some-bg-img {
  background: url(https://via.placeholder.com/1920x200.png?text=Sample%20Background%20Image);
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.navs-are-fixed #menu_arriba {
  position: fixed;
}

.navs-are-fixed #menu_izq {
  position: fixed;
  top: 72px; /* the height of your top nav */
}

.navs-are-fixed .some-sample-content {
  position: absolute;
  top: 72px; /* the height of your top nav */
  left: 200px; /* the width of your left nav */
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<body>
  <div class="some-bg-img"></div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
    <div class="navbar-brand"></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>

  <div class="d-flex h-100 w-100 position-absolute">
    <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>

    <div class="some-sample-content">
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
    </div>
  </div>
</body>

如果您真的必须将 fixed 定位在左侧导航栏上，那么您将不得不根据两个横幅的 height 来计算它的 top 值& 顶部导航，这样如果滚动条的 Y 位置 top 超过横幅的 height，则左侧导航的 top 值将等于横幅的高度顶部导航 - 所以你将它向下推，这样它们就不会重叠。如果滚动条的 Y 位置的 top 没有超过横幅的高度，则左侧导航的顶部值将等于横幅的 height 与顶部的差值nav减去滚动条顶部的Y位置。

$(window).scroll(function() {

  // innerHeight is used to include any padding
  var bgImgHeight = $('.some-bg-img').innerHeight();
  var topNavHeight = $('#menu_arriba').innerHeight();
  var leftNavInitialCssTop = bgImgHeight + topNavHeight;

  // if the the scroll reaches the end of the background image, this is when you start to assign 'fixed' to the top nav
  if ($(window).scrollTop() >= bgImgHeight) {
    $('body').addClass("navs-are-fixed");
    $("#menu_izq").css("top", topNavHeight);
  } else {
    $('body').removeClass("navs-are-fixed");
    $("#menu_izq").css("top", leftNavInitialCssTop - $(window).scrollTop())
  }

});

#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;
  top: 0;
}

body {
  background-color: #ffc75a !important;
  height: 400vh; /* sample arbitrary value to force body scrolling */
}

.some-bg-img {
  background: url(https://via.placeholder.com/1920x200.png?text=Sample%20Background%20Image);
  height: 179px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.navs-are-fixed #menu_arriba {
  position: fixed;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="some-bg-img"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
  <div class="navbar-brand"></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>

Answer 2

您应该能够只使用 CSS 而不是 javascript 使用 position: sticky 属性。

将两个元素设为 position: sticky，顶部导航应该有一个 top: 0 属性，侧面导航应该有一个 top: x 属性，其中 x 是顶部导航的高度。

这应该足够了，您应该可以删除 js 代码。

在此处阅读有关 sticky 职位的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 3

你为什么要这样做？您可以将顶部菜单和侧边菜单和文本容器一起移动到一个容器中以相互关联，将文本框容器固定高度百分比设置并将其overflow-y设置为auto。使整个容器像顶部菜单一样可动画。这将解决您的问题。

Answer 4

侧面和顶部滑动 <nav> 元素无法与页面内容正确交互。尤其是横向 <nav> 根据许多变化的规则进行垂直滑动 - 坐下，跟随，滑动，分开。一下子太多了。

解决方法 1 - 平滑 - 顶部滑动，侧面固定 （锚更正）

恐怕这不是您梦想的解决方案。避免挤压点，工作顺畅轻松。

$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
      
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
} else {
$('#menu_arriba').css('position','relative');    /* fixed */
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
}});

*{ box-sizing: border-box}
body{
margin: 0;  
text-align: center;
z-index: -1;
}
#pilar{     /* added fix */
background: #503522;
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: -1
}
#menu_izq {
background: 0;  /* fixed */
width: 200px;    /* padding-top: 200px; removed */
position: fixed;
top: 200px; /* fixed */
left: 0;
bottom: 0;
z-index: 0; /* fixed */
}
#menu_arriba{
background: #503522;
width: 100%;
position: relative; /* added fix */
z-index: 1; /* added fix */
}
p{ margin: 100px 100px 100px 250px; z-index: -1 }
a{ display: inline-block; width: 150px; border: 1px solid white; text- align: center; padding: 10px 0; margin: 20px}
img{ border-bottom: 10px solid #503522; margin: 0 0 -3px; width: 100%; height: 200px; z-index: 1; z-index: 9;}

<img src="img/blue.jpg" alt="blue">
<div id="pilar"></div>  <!-- added fix -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" ></div>   <!-- needed or redundancy? -->
<a href="user.php" class="navbar-brand">Inicio</a>
<a href="instrucciones.php" class="navbar-brand">Instrucciones</a>
<a href="contacto.php" class="navbar-brand">Contacto</a>
<a href="faq.php" class="navbar-brand">FaQ</a>
<a href="ajax/logout.php" class="navbar-brand"><i class="fas fa-sign-out-alt"></i>Salir</a>
</nav>
<nav class="sidenav" id="menu_izq">
<a href="nueva_cata.php">Nueva Cata</a>
<a href="nueva_cerveza.php">Nueva Cerveza</a>
<a href="cata.php">Mis catas</a>
<a href="mis_cervezas.php">Mis cervezas</a>
<a href="mis_amigos.php">Mis amigos</a>
</nav><p>... </p><p> ...</p>

解决方法 1.1 - 流畅且视野开阔
仅更改

#menu_arriba{
background: 0;
width: 100%;
position: relative; /* added fix */
z-index: 0  /* added fix */
}
#hole{
background: #503522;
height: 100%;
margin-left: 200px;
width: auto;
}

<div id="pilar"></div>  <!-- added fix -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div id="hole">
    <div class="navbar-brand" ></div>
    <a href="user.php" class="navbar-brand">Inicio</a>
    <a href="instrucciones.php" class="navbar-brand">Instrucciones</a>
    <a href="contacto.php" class="navbar-brand">Contacto</a>
    <a href="faq.php" class="navbar-brand">FaQ</a>
    <a href="ajax/logout.php" class="navbar-brand"><i class="fas fa-sign-out-alt"></i> Salir</a>
</div></nav>

解决方法 2 - 脏 - 隐藏或掩盖副作用
如果您仍然坚持 - 不是那么流畅，稍微有弹性的菜单。你的梦想也没有实现，但没有明显的漏洞。给你：

$(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','0');
} else {
$('#menu_arriba').css('position','initial');
$('#menu_izq').css('position','initial');
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
$('#menu_izq').css('position','initial').css('top', '200');
}});

*{ box-sizing: border-box}
body{
margin: 0;  
text-align: center;
}
#menu_izq {
background: 0;
height: auto;
width: 200px;
padding-top: 100px;
}
#menu_arriba{
background: #503522;
width: 100%;
z-index: 1
}
#pilar{
background: #503522;
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: -1
}
p { margin: 100px 300px; position: relative; bottom: 400px}
a{ display: inline-block; width: 150px; border: 1px solid white; text-align: center; padding: 10px 0; margin: 20px}
img{ border-bottom: 10px solid #503522; margin: 0 0 -3px; width: 100%; height: 200px;}

<img src="img/blue.jpg" alt="blue">
<div id="pilar"></div>

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" ></div>   <!-- what for it is? needed? -->
<a href="user.php" class="navbar-brand">Inicio</a>
<a href="instrucciones.php" class="navbar-brand">Instrucciones</a>
<a href="contacto.php" class="navbar-brand">Contacto</a>
<a href="faq.php" class="navbar-brand">FaQ</a>
<a href="ajax/logout.php" class="navbar-brand"><i class="fas fa-sign-out-alt"></i>Salir</a>
</nav>
<nav class="sidenav" id="menu_izq">
<a href="nueva_cata.php">Nueva Cata</a>
<a href="nueva_cerveza.php">Nueva Cerveza</a>
<a href="cata.php">Mis catas</a>
<a href="mis_cervezas.php">Mis cervezas</a>
<a href="mis_amigos.php">Mis amigos</a>
</nav><p>... </p><p> ...</p>

您的代码中还有其他小缺点。
<a href=""><p> .... </p></a> 未必是犯罪，但也不是好事。 <p>有它自己的特点，不是加强筋或柱子-我用css固定了它。

上面是我使用的完整代码 - 作为提示和解释。根据您的需要和品味调整元素大小。希望你们喜欢
干杯

动画导航与另一个导航一起移动

Animate nav to move with another nav

html

javascript

jquery

css-position