Как поменять навбар на свиток? - PullRequest
Новая
       39

Как поменять навбар на свиток?

0 голосов
/ 17 января 2020

Сегодня это моя навигационная панель, созданная только с html и css. Lo go слева - это просто текст, использующий тег <br>, чтобы получить его в разных строках. Наверное, не самый лучший способ, особенно для того, что я хочу.

Это то, чего я хочу достичь, и прокручиваю:

Как видите, lo go не разделяется на при просмотре страницы сделайте навигационную панель более узкой по практическим соображениям. При поиске решения этой проблемы я узнал, как преобразовать навигационную панель, но не вещь lo go.

Возможно ли преобразовать ее обратно в исходное состояние при достижении верхней части страницы снова? ?

1 Ответ

1 голос
/ 17 января 2020

Надеюсь, это то, что вы ожидаете:

при прокрутке вниз изменяется цвет фона навигационной панели. 

$(function() {
  $(document).scroll(function() {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());

    if ($(this).scrollTop() > $nav.height()) {
      $('#logo').html("logo content..");
    } else {
      $('#logo').html("logo <br> content..");

    }

  });
});
@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css";
body {
  padding-top: 70px;
  background: #ddd;
}

.navbar {
  color: white;
}

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

.navbar-fixed-top.scrolled {
  color: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav id="navigation" class="navbar navbar-dark bg-primary navbar-fixed-top">
    <div id="logo">
      logo <br> content..
    </div>
  </nav>
</header>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
<p> contents...</p>
...