CODEWITHSUNDEEP
htmlnavbaronscroll
Storm1
Storm1

Reputation: 209

How to change navbar change on scroll?

This is my navbar today, created with just html and css. The logo on the left is just text and using <br>tag to get it on different lines. Probably not the best way, especially for what I want to to.

This is what I want to achieve then I scroll:

As you see the logo is not not split to make the navbar narrower for practical reasons when viewing the page. When researching for solution for this problem I found out how to transform the navbar, but not the logo thing.

Is it possible to transform it back into its original state when reaching the top of the page again?

Upvotes: 0

Views: 136

Answers (1)

Amaresh S M
Amaresh S M

Reputation: 3010

I hope this is what u r expecting:

when you scroll down the background colour of the nav bar is changed.

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

Upvotes: 1

Related Questions