Sticky Shrinking Top Bar Nav

By Rafi

F6
#
How do I use This?

A topbar navigation that is sticky and shrinks to take up less space when sticky.

HTML
<header id="header" class="topbar-sticky-shrink-header">
</header>

<div data-sticky-container>
  <div data-sticky data-margin-top='0' data-top-anchor="header:bottom" data-btm-anchor="content:bottom">
    <div class="top-bar topbar-sticky-shrink">
      <div class="top-bar-title">
        <img src="https://placehold.it/150x38" alt="" />
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><a href="#">Thing 1</a></li>
          <li><a href="#">Thing 2</a></li>
          <li><a href="#">Thing 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<br />

<div class="column row" id="content">
  <h3 class="text-center">Creating a sticky Navigation Menu with Top Bar!</h3>
  <img src="https://placehold.it/1200x300&text=content/100">
  <img src="https://placehold.it/1200x300&text=content/200">
  <img src="https://placehold.it/1200x300&text=content/300">
  <img src="https://placehold.it/1200x300&text=content/400">
  <img src="https://placehold.it/1200x300&text=content/500">
  <img src="https://placehold.it/1200x300&text=content/600">
</div>

$topbar-sticky-shrink-padding: 2rem; // controls the un-stuck height of topbar
$topbar-sticky-shrink-padding-stuck: 1rem; // controls the is stuck height of topbar
$topbar-sticky-shrink-bg: #2c3840;

.topbar-sticky-shrink {
  padding:$topbar-sticky-shrink-padding;
  transition: padding 0.25s ease;
  background: $topbar-sticky-shrink-bg;

  .menu {
    background: $topbar-sticky-shrink-bg;
  }
}

.is-stuck .topbar-sticky-shrink {
  padding: $topbar-sticky-shrink-padding-stuck;
  transition: padding 0.25s ease;
}

[data-sticky] {
  width: 100%;
}

// for demo only
.topbar-sticky-shrink-header {
  padding: 10rem 0;
  background: url('https://placehold.it/2000x500&text=this is a header') center center no-repeat;
  background-size: cover;
}




.topbar-sticky-shrink {
  padding: 2rem;
  transition: padding 0.25s ease;
  background: #2c3840;
}

.topbar-sticky-shrink .menu {
  background: #2c3840;
}

.is-stuck .topbar-sticky-shrink {
  padding: 1rem;
  transition: padding 0.25s ease;
}

[data-sticky] {
  width: 100%;
}

.topbar-sticky-shrink-header {
  padding: 10rem 0;
  background: url("https://placehold.it/2000x500&text=this is a header") center center no-repeat;
  background-size: cover;
}

JS