fixed-navigation

Fixed navigation

Fixed navigation when scrolling. Hides navigation when scrolling down, reappears when slightly scrolling up.

Requires jQuery.

Install

bower install trendwerk/fixed-navigation --save

Usage

Using fixed-navigation is a two-step process:

1. JS: Use the jQuery plugin on the element that should be fixed.
2. SCSS: @include the mixin on the element that should be fixed;

Implementation

$('.header').fixedNavigation({
  minWidth: 981,
});

@include fixed-navigation((
  'height': $header-height,
));

Options

jQuery plugin

Option	Default	Required	Description
delta	40	No	Distance to scroll up before showing the fixed element
minWidth	0	No	Minimum window width from which the element is fixed

Mixin

Option	Default	Required	Description
height	null	Yes	Height of the header (this is used for the padding-top on body)
speed	0.2s	No	Speed of the transition when showing the fixed element

Fixed navigation + Toggle navigation

When creating a fixed header and using toggle-navigation on the same header, you'll encounter a few conflicts. You can find a brief summary below.

| Problem | Description | Solution | | :--- | :--- | :--- | :--- | | transition | A transition is applied by toggle-navigation (from a certain breakpoint). This overwrites the transition from fixed-navigation, because there is no way to add to transitions yet | Apply the right transitions in your theme under the right conditions (see below) | body height | toggle-navigation sets the body height to 100%, which, when opening, forces the screen to the top and, when closing the navigation again, stays at the top of the screen | There is no elegant solution

Example

The example below shows how you could deal with the transition conflict. $toggle-breakpoint is assumed to be the breakpoint used for the until parameter.

.header {
  $transitions: (
    'fixed': transform 0.2s ease-in-out,
    'toggle': (background 0.4s cubic-bezier(0, 0, 0, 1), height 0.4s cubic-bezier(0, 0, 0, 1)),
  );

  @media(max-width: ($toggle-breakpoint - 1px)) {
    transition: map-get($transitions, 'toggle');
  }

  .fixed & {
    transition: map-get($transitions, 'fixed');

    @media(max-width: ($toggle-breakpoint - 1px)) {
      transition: map-values($transitions);
    }
  }
}

This makes sure that:

• Only the toggle-navigation transition is applied when the header should not be fixed but could be toggled
• Only the fixed-navigation transition is applied when the header should be fixed but could not be toggled
• Both transitions are applied when the header should be fixed and could be toggled