Question

我在PHP中有一个脚本，用于定义网站的菜单和导航栏。我有一个顶部菜单，当您向下滚动页面时，它固定在页面顶部。我想在左侧菜单“粘贴”到顶部菜单中找到第二个菜单。我的操作方式是，当顶部菜单到达页面顶部时，它运行得很好，就像我想要的那样，它由左侧菜单固定。问题在于，如果顶部菜单没有到达页面顶部（就像只是滚动一点），则左侧菜单不会停留在顶部菜单上。

顶部菜单是具有“ Inicio”，“ Instrucciones”等的菜单。左侧菜单是具有“ Nueva cata”，“ Nueva cerveza”等的菜单。

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

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

这是顶部菜单到达页面顶部之前的页面（0 <滚动<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是因为这样，它在左侧菜单的右侧以及{{1 }}，内容显示在菜单的末尾。我需要找到一个解决方案而不更改（我认为）position: sticky||relative（左侧菜单）的position: fixed。

Answer 1

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

基本上在脚本上，只需检测滚动条的Y位置的顶部是否已经超过背景图像元素的height。如果是，则将fixed位置分配给nav元素，并根据需要调整内容相对于包裹左nav和内容的容器的位置。检查涉及.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的位置保持在左侧导航栏中，那么您将不得不根据横幅和广告的top来计算height的值顶部导航，例如，如果滚动条的Y位置的top超过横幅广告的height，则左侧导航的top值将等于顶部导航的高度-因此您将其向下推，以免它们重叠。如果滚动条的Y位置的top不超过横幅的高度，则左侧导航栏的顶部值将等于横幅的height与顶部的差导航减去滚动条的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

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

同时使用两个元素position: sticky，顶部导航应具有top: 0属性，侧面导航应具有top: x属性，其中x是顶部导航的高度

这就足够了，您应该能够删除js代码。

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

Answer 3

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

Answer 4

侧面和顶部滑动<nav>元素无法与页面内容正确交互。尤其是<nav>横向$(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'); }});，它根据许多变化的规则进行垂直滑动-坐着，跟随，滑动，分开。一次太多了。

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

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

*{ 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>

#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>

解决方法1.1-平滑且风景优美
只是改变

$(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');
}});

解决方法2-脏-隐藏或掩盖副作用
如果您仍然坚持-不太流畅，菜单会有些弹性。您的梦想也没有实现，但没有明显的漏洞。在这里，您拥有它：

*{ 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>可能不是犯罪，但这也不是一件好事。 np.resize有其自身的特点，它不是加劲肋或支柱-我用CSS固定了它。

上面有我使用的完整代码-作为提示和解释。根据您的需求和口味调整元素的大小。希望你喜欢
欢呼

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

4 个答案: