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

标签 javascript html jquery css-position

我在 PHP 中有一个脚本，我在其中定义网站的菜单和导航栏。我有一个顶部菜单，当您向下滚动页面时，它会固定在页面顶部。我想在左侧“粘”到顶部菜单的第二个菜单。我这样做的方式是，当顶部菜单到达页面顶部时它运行良好，它会像我想要的那样被左侧菜单固定。问题是如果顶部菜单没有到达页面顶部(就像它只是一点点滚动)，左侧菜单不会粘在顶部菜单上。
顶部菜单是具有“Inicio”、“Instrucciones”等的菜单。左侧菜单是具有“Nueva cata”、“Nueva cerveza”等的菜单。
这是开头的页面(0 滚动)。
Start
这是顶部菜单到达页面顶部后的页面(>200 滚动)。
Finish
这是顶部菜单到达页面顶部之前的页面(0 < 滚动 < 200)。
Third pic
正如您在第三页中看到的那样，左侧菜单随着滚动而下降，而不是随着顶部菜单上升。
这是 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 ，内容显示在菜单的末尾。我需要在不改变(我认为)position: fixed 的情况下找到解决方案的menu_izq (左侧菜单)。

最佳答案

看起来你正在使用 Bootstrap。目前，您的左侧导航最初设置为 position: fixed , 我推荐使用 position: relative最初到您的左侧导航，以便定位您的nav元素可以是 相对于背景图像的高度 .使用 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定位在您的左侧导航，那么您将不得不计算它的top基于 height 的值横幅和顶部导航，这样如果 top滚动条的 Y 位置超过 height横幅，top左侧导航的值将等于顶部导航的高度-因此您将其向下推以使它们不重叠。如果 top滚动条的 Y 位置不超过横幅的高度，左侧导航的顶部值将等于 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>

关于javascript - 动画导航与另一个导航一起移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62999023/

上一篇：javascript - .each() 中的 setInterval 仅适用于最后一个间隔？

下一篇：javascript - 使用 NodeJS 将数据编码为 JWT token 获取错误 PEM 例程 :PEM_read_bio:no start line

相关文章：

javascript - app.get() 和 app.route().get() 的区别

javascript - Highcharts SetData 只能工作一次

javascript - 单击时无法切换动画

javascript - 无法通过ajax将javascript变量传递给PHP？

javascript - Uncaught Error : SECURITY_ERR: DOM Exception 18 when I try to set a cookie

javascript - 等待 JavaScript 中元素的加载

javascript - 使用 Javascript 从 SOAP 中提取数据

c# - GridView 状态问题？

javascript - HTML/CSS/JavaScript : Force child elements to never exceed parent size without modifying children

javascript - jQuery 的委托(delegate)事件无法取消中键点击

©2024 IT工具网  联系我们