如何更改滚动时的导航栏更改？

Question

这是我今天的导航栏，仅使用 html 和 css 创建。左侧的徽标只是文本，使用 <br> 标签将其放在不同的行上。可能不是最好的方法，尤其是对于我想要的。

这就是我想要实现的然后滚动：

如您所见，出于实际原因，在查看页面时，徽标并未拆分以使导航栏变窄。在研究这个问题的解决方案时，我发现了如何转换导航栏，而不是徽标。

是否可以在再次到达页面顶部时将其变回原来的状态？

Answer 1

我希望这是你所期待的：

当您向下滚动时，导航栏的背景颜色会发生变化。

$(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>

如何更改滚动时的导航栏更改？

How to change navbar change on scroll?

html

navbar

onscroll