jquery - 导航栏固定缩小下的封面图像

Question

我有一个容器，它覆盖了我页面 100% 的高度，并带有背景图片。我有一个固定的 <navbar>滚动，但每当我向下滚动时，我的背景图像就会跳起来。

我尝试添加 padding-top到<navbar>下的区域每当我开始滚动时，这都会导致我的封面图片的高度缩小一点。

如何保持图像的大小并使用固定的 <navbar> 消除滚动上的跳跃？

$(function() {
  var stickyNavTop = $('.navbar').offset().top;
  var stickyNav = function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) {
      $('.navbar').addClass('sticky');
      $('#landingDiv').addClass('stickyLandingDiv');

    } else {
      $('.navbar').removeClass('sticky');
      $('#landingDiv').removeClass('stickyLandingDiv');
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

html,
body {
  height: 100%
}

.navbar-nav {
  margin: 0 auto;
}

.navbar {
  z-index: 1000;
  background-color: #191919 !important;
}

.sticky {
  position: fixed;
  width: 100%;
}

.stickyLandingDiv {
  padding-top: 55px;
}

#landingDiv {
  height: 100%;
}

#landingPageImage {
  background-image: url(/Assets/Images/background6-min.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header-menu" id="top">
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item ">
          <a href="#top" class="nav-link">test</a>
        </li>
        <li class="nav-item">
          <a href="#item1" class="nav-link">item1</a>
        </li>
        <li class="nav-item">
          <a href="#item2" class="nav-link">item2</a>
        </li>
        <li class="nav-item">
          <a href="#item3" class="nav-link">item3</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div id="landingDiv">
  <div id="landingPageImage">
  </div>
</div>
<section id="about">
  <h1> next page section </h1>
</section>

Answer 1

如果没有看到它的实际效果很难判断，但它可能与导航栏从页面流中到 position: fixed 的流中有关，以及它是如何发生的影响后面页面上的元素。我认为您必须首先将导航栏设置为 fixed 或 absolute ，或者将背景 div 设置为 absolute 所以它不是受到影响。如果您不想处理稍后添加的任何其他可能“跳跃”的元素，第一个选项更好。