Question

当激活粘性标题时，我一直在努力解决与显示徽标相关的一个问题。到目前为止我完成的菜单按预期工作，但是我需要在标题变粘后立即以小版本显示徽标并保持选项居中。低于我的目标：

一旦div变得粘稠，我就需要这样的东西：

到目前为止，这是我的代码：

＆＃13;

.navbar {
  background-color: #fff !important;
}

.navbar .navbar-nav li a {
  color: #b29b72 !important;
}

.navbar .navbar-brand {
  color: #b29b72 !important;
}

.navbar .navbar-brand:hover {
  color: #b29b72 !important;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(178,155,114, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/* HOMEPAGE *****************************************************/

.video-container {
  padding-right: 0px;
  padding-left: 0px;
}

#splash {
  position: relative;
  text-align: center;
  height: 300px;
  background-color: #878787;
}

#splash .video {
  position: relative;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  border-bottom: 1px solid #eee;
}

#splash .opaque {
  opacity: 0.4;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.menu-options {
  padding-top: 12px;
}

.menu-options a {
  color: #b29b72;
  font-weight: 600;
  font-size: 20px;
}

#menu-row {
  height: 50px;
  background-color: #000000 !important;
}

.menu-options ul {
  margin: 0;
  padding: 0;
}

.menu-options ul li {
  display: inline-block;
  width: 120px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>My Fantastic Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
    <div class="container">
      <div class="navbar-collapse collapse nav-content order-2">
        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="http://via.placeholder.com/200x110"></a>
        </li>
        <button class="navbar-toggler custom-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
      </ul>
      <div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
        <ul class="ml-auto nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 4</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="menu-row" class="sticky-top">
    <div class="container">
      <div class="row">
        <div class="col-12 menu-options text-center">
          <ul>
            <li><a href="">OPTION 1</a></li>
            <li><a href="">OPTION 2</a></li>
            <li><a href="">OPTION 3</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid video-container">
    <div id="splash">
      <div class="video">
        <video autoplay="autoplay" poster="http://via.placeholder.com/1920x300" loop="loop" muted="muted" preload="auto">
                            <source src="" type="video/mp4">
                            <source src="" type="video/webm">
                        </video>
        <div class="opaque"></div>
      </div>
    </div>
    <div class="container">
      <div class="row" style="height: 100vh;">
        <div class="col-12">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

你需要两个徽标（大 - 标准。小 - 滚动/导航）。然后执行以下操作将以下 JQuery 添加到您的代码中，但请确保使用特定的类名（而不是我在示例中使用的名称）。

$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      if(!logo.hasClass("sml-logo")) {
        logo.hide();
        logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
      }
    } else {
      if(!logo.hasClass("lrg-logo")) {
        logo.hide();
        logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
      }
    }

});
});

.wrapper {
  height: 2000px;
  position: relative;
  background: green;
}

header {
  position: fixed;
  width: 100%;
  height: 50px;
  background: grey;
}

.lrg-logo {
  width: 300px;
  height: 50px;
  text-align: center;
  background: red;
}

.sml-logo {
  width: 200px;
  height: 20px;
  text-align: center;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
  <div class="lrg-logo">Logo</div>
</header>
</div>

粘性顶部和徽标显示

1 个答案: