导航栏下的封面图片固定缩小答案

【问题标题】：Cover image under navbar fixed shrinking导航栏下的封面图片固定缩小
【发布时间】：2019-04-01 23:26:22
【问题描述】：

我有一个容器，其背景图像覆盖了我的页面 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>

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

【讨论】：

在搞砸的时候，当我从一开始就将导航栏设置为固定而不是之后将固定类添加到它时，它就修复了。所以这对我来说是正确的答案。

【解决方案2】：

你试过使用sticky吗？在几乎所有情况下，CSS 属性是否都能正常工作。试试下面的代码。只需更改您的 CSS，我认为可以正常工作：


html,
body {
  height: 100%
}

/* This piece of code will do the magic */
.header-menu {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.navbar-nav {
  margin: 0 auto;
}

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

.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%;
}

【讨论】：