jquery - 使用 UIKit 3 向下滚动时移除粘性导航栏

Question

我正在使用 UIKit CSS 框架。我试图隐藏一个粘性导航栏。我想在一个页面中使用粘性导航栏，并在另一个页面导航栏部分使用相同的导航栏来删除粘性。

我为此尝试了以下 UIKit 代码，但我一直无法这样做。请给我一些建议。

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet" />
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar">
  <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
    <div class="uk-navbar-left">
      <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
          <a href="#">Parent</a>
          <div class="uk-navbar-dropdown">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Item</a></li>
      </ul>
    </div>
  </nav>
</div>
<div class="uk-container "> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit suscipit doloremque magnam, officia quaerat accusantium, quia cupiditate nulla ratione quos quis esse! Delectus blanditiis dignissimos sequi repellat debitis itaque iure quam tenetur assumenda
  nisi repellendus magni, dolore odit laborum officia ducimus error, quod, voluptatem nostrum perspiciatis? Asperiores sit, do asperiores consequuntur veniam eius quasi labore perspiciatis, natus dolor nam atque. Cupiditate quasi, sequi dolores impedit
  mollitia vitae modi et saepe architecto nisi rerum dicta est praesentium cumque reprehenderit autem enies similique animi eligendi porro qui voluptatibus. Repudiandae hic placeat labore blanditiis adipisci consectetur molestiae, vel possimus ex deleniti
  iure. Quasi accusamus corporis, fugit incidunt nisi repellendus quo similique est provident tenetur, aperiam ex a. Provident quas, aliquam fugit aut nisi deleniti consequuntur numquam excepturi quae consequatur. Quas molestias, natus sunt voluptate
  hic eum cumque.labore blanditiis adipisci consectetur molestiae, vel possimus ex deleniti iure. Quasi accusamus corporis, fugit incidunt nisi repellendus quo similique est provident tenetur, aperiam ex a. Provident quas, aliquam fugit aut nisi deleniti
  consequuntur numquam excepturi quae consequatur. Quas molestias, natus sunt voluptate hic eum cumque </div>

Answer 1

您要从第二页中删除的代码部分是这样的:

uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar"

在将页面发送到用户浏览器之前，我会使用一些服务器端逻辑来确定页面是否应包含此行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet" />
<div >
  <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
    <div class="uk-navbar-left">
      <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
          <a href="#">Parent</a>
          <div class="uk-navbar-dropdown">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Item</a></li>
      </ul>
    </div>
  </nav>
</div>
<div class="uk-container "> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit suscipit doloremque magnam, officia quaerat accusantium, quia cupiditate nulla ratione quos quis esse! Delectus blanditiis dignissimos sequi repellat debitis itaque iure quam tenetur assumenda
  nisi repellendus magni, dolore odit laborum officia ducimus error, quod, voluptatem nostrum perspiciatis? Asperiores sit, do asperiores consequuntur veniam eius quasi labore perspiciatis, natus dolor nam atque. Cupiditate quasi, sequi dolores impedit
  mollitia vitae modi et saepe architecto nisi rerum dicta est praesentium cumque reprehenderit autem enies similique animi eligendi porro qui voluptatibus. Repudiandae hic placeat labore blanditiis adipisci consectetur molestiae, vel possimus ex deleniti
  iure. Quasi accusamus corporis, fugit incidunt nisi repellendus quo similique est provident tenetur, aperiam ex a. Provident quas, aliquam fugit aut nisi deleniti consequuntur numquam excepturi quae consequatur. Quas molestias, natus sunt voluptate
  hic eum cumque.labore blanditiis adipisci consectetur molestiae, vel possimus ex deleniti iure. Quasi accusamus corporis, fugit incidunt nisi repellendus quo similique est provident tenetur, aperiam ex a. Provident quas, aliquam fugit aut nisi deleniti
  consequuntur numquam excepturi quae consequatur. Quas molestias, natus sunt voluptate hic eum cumque </div>