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

时间：2019-04-01 13:37:26

标签： jquery html css

我有一个容器，其中包含背景图片的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>

2 个答案:

答案 0 :(得分：0)

您尝试使用12:30:17 [SonarQube analysis] [ERROR] Java heap space -> [Help 1] 12:30:17 [SonarQube analysis] java.lang.OutOfMemoryError: Java heap space 12:30:17 [SonarQube analysis] at org.sonar.java.collections.AVLTree$Equals.compute (AVLTree.java:455) 12:30:17 [SonarQube analysis] at org.sonar.java.collections.AVLTree$Node.equals (AVLTree.java:387) 12:30:17 [SonarQube analysis] at java.util.Objects.equals (Objects.java:77) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ProgramState.equals (ProgramState.java:260) 12:30:17 [SonarQube analysis] at java.util.Objects.equals (Objects.java:77) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ExplodedGraph$Node.equals (ExplodedGraph.java:124) 12:30:17 [SonarQube analysis] at java.util.HashMap$TreeNode.find (HashMap.java:1919) 12:30:17 [SonarQube analysis] at java.util.HashMap$TreeNode.find (HashMap.java:1929) 12:30:17 [SonarQube analysis] at java.util.HashMap$TreeNode.putTreeVal (HashMap.java:2048) 12:30:17 [SonarQube analysis] at java.util.HashMap.putVal (HashMap.java:638) 12:30:17 [SonarQube analysis] at java.util.HashMap.put (HashMap.java:612) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ExplodedGraph.node (ExplodedGraph.java:55) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ExplodedGraphWalker.enqueue (ExplodedGraphWalker.java:1101) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ExplodedGraphWalker.enqueue (ExplodedGraphWalker.java:1083) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ExplodedGraphWalker.enqueue (ExplodedGraphWalker.java:1075) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ExplodedGraphWalker.execute (ExplodedGraphWalker.java:231) 12:30:17 [SonarQube analysis] at org.sonar.java.se.ExplodedGraphWalker.visitMethod (ExplodedGraphWalker.java:209) 12:30:17 [SonarQube analysis] at org.sonar.java.se.SymbolicExecutionVisitor.execute (SymbolicExecutionVisitor.java:74) 12:30:17 [SonarQube analysis] at org.sonar.java.se.SymbolicExecutionVisitor.visitNode (SymbolicExecutionVisitor.java:64) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.visitors.SubscriptionVisitor.visit (SubscriptionVisitor.java:103) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.visitors.SubscriptionVisitor.visitChildren (SubscriptionVisitor.java:128) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.visitors.SubscriptionVisitor.visit (SubscriptionVisitor.java:105) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.visitors.SubscriptionVisitor.visitChildren (SubscriptionVisitor.java:128) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.visitors.SubscriptionVisitor.visit (SubscriptionVisitor.java:105) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.visitors.SubscriptionVisitor.scanTree (SubscriptionVisitor.java:86) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.visitors.SubscriptionVisitor.scanFile (SubscriptionVisitor.java:72) 12:30:17 [SonarQube analysis] at org.sonar.java.se.SymbolicExecutionVisitor.scanFile (SymbolicExecutionVisitor.java:54) 12:30:17 [SonarQube analysis] at org.sonar.java.model.VisitorsBridge.runScanner (VisitorsBridge.java:148) 12:30:17 [SonarQube analysis] at org.sonar.java.model.VisitorsBridge.visitFile (VisitorsBridge.java:136) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.JavaAstScanner.simpleScan (JavaAstScanner.java:96) 12:30:17 [SonarQube analysis] at org.sonar.java.ast.JavaAstScanner.scan (JavaAstScanner.java:68) 12:30:17 [SonarQube analysis] at org.sonar.java.JavaSquid.scanSources (JavaSquid.java:113) 吗？ CSS属性是否在大多数情况下都能正常工作。尝试下面的代码。只需更改您的CSS，我认为会很好：

Foo.java

答案 1 :(得分：0)

很难说出它的实际作用，但它可能与导航栏有关，从进入页面流程到使用position: fixed离开导航流程，以及它如何影响页面上的元素之后的页面。我认为您首先必须将导航栏设置为fixed或absolute，或者将背景div设置为absolute，这样才不会受到影响。如果您不想处理以后添加的其他任何可能“跳转”的元素，则第一种选择更好。

相关问题
最新问题