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>

使用UIKit 3向下滚动时删除粘性导航栏

1 个答案: