Удалите липкую панель навигации при прокрутке вниз с помощью UIKit 3

Question

Я использую UIKit CSS-фреймворк.Я пытаюсь скрыть липкий Navbar.Я хочу использовать закрепленную панель навигации на одной странице и ту же панель навигации для удаления закрепления в разделе панели навигации на другой странице.

Я пробовал следующий код 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>