Ben Sidebar

app.scss

.app-view {
  display: flex;
  max-width: $size-max-content-width;
  margin: 0 auto;

  > :first-child {
    flex-shrink: 0;
    flex-basis: 5rem;
  }

  > :last-child {
    flex-grow: 1;
  }
}

.app-view--fixed-sidebar {
  > :first-child {
    position: fixed;
    top: 0;
    z-index: 100;
    bottom: 0;
    width: 5rem;
  }

  > :last-child {
    margin-left: 5rem;
  }
}

.app-view--bottom-sidebar {
  > :first-child {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 5rem;
  }

  > :last-child {
    margin-left: 5rem;
  }
}

// Main view
// ============================================================================
@media #{$large-up} {
  .app-view {
    > :first-child {
      flex-shrink: 0;
      flex-basis: 14rem;
    }
  }

  .app-view--fixed-sidebar, .app-view--bottom-sidebar {
    > :first-child {
      width: 14rem;
    }

    > :last-child {
      margin-left: 14rem;
    }
  }
}

// Private dashboard
// ============================================================================
.main-view--private {
  min-height: calc(100vh - 14rem);
  padding-bottom: 10rem;
  position: relative;

  h2 {
    line-height: 1;
    margin-top: 0;
    margin-bottom: 2rem;
  }
}

// Main view content
// ============================================================================
.main-view--private {
  .main-view__content {
    padding: $size-large $size-large 0 $size-large;
    position: relative;
  }
}

// Main view title
// ============================================================================
.main-view__title {
  @extend .pink-title;
}

.main-view__subtitle {
  font-style: italic;
  margin-bottom: $size-medium;
}

// Lock
// ============================================================================
.main-view__lock {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: fade-out(white, .1);
  padding-top: 10%;
  text-align: center;

  h2 {
    font-weight: bold;
  }

  span, h2, p {
    margin-bottom: $size-medium;
  }
}

// Footer
// ============================================================================
.main-view-footer {
  bottom: 0;
  display: flex;
  height: 6rem;
  justify-content: space-between;
  left: 0;
  padding: 2.5rem 4rem 2.5rem 4rem;
  position: absolute;
  right: 0;

  p {
    margin: 0;
  }
}

.main-view-footer__resources {
  &, a {
    color: $color-bright-blue;
    text-transform: uppercase;
    font-size: .84rem;
  }

  a:hover {
    text-decoration: underline;
  }
}

.main-view-footer__credits {
  color: #c8d3e6;
  font-size: .84rem;
  font-weight: 900;
  text-transform: uppercase;

  a {
    color: $color-bright-blue;
  }
}

ui.js

(function ($) {
    $(document).on('ready', function () {
        var $sidebar = $('.sidebar');
        var $app = $('.app-view');

        if ($sidebar.length === 0 || $app.length === 0) {
            return;
        }


        function updatePinnedState () {
            var $sidebar = $('.sidebar');
            var $app = $('.app-view');

            var scrolledOffset = $(window).scrollTop();
            var appScrolledOffset = $app.offset().top - scrolledOffset;
            var sidebarScrolledOffset = $sidebar.offset().top - scrolledOffset;
            var sidebarContentHeight = $sidebar.find('.sidebar__nav').outerHeight(true);
            var isScrolledPastHeader = sidebarScrolledOffset < 1;
            var bottomSidebar = $sidebar.offset().top + sidebarContentHeight;
            var bottomViewport = scrolledOffset + $(window).height();

            // If the sidebar content is going to fit nicely
            if (appScrolledOffset > 0) {
                $app.removeClass('app-view--fixed-sidebar app-view--bottom-sidebar');
            } else if (sidebarContentHeight < $(window).height() && isScrolledPastHeader) {
                $app.addClass('app-view--fixed-sidebar').removeClass('app-view--bottom-sidebar');
            } else if (bottomViewport >= bottomSidebar && isScrolledPastHeader) {
                $app.addClass('app-view--bottom-sidebar').removeClass('app-view--fixed-sidebar')
            } else {
                $app.removeClass('app-view--fixed-sidebar app-view--bottom-sidebar');
            }
        }

        $(window).on('scroll resize', updatePinnedState);
    });
})(jQuery);