ScrollIntent.js

Intuitive Navigation Demo

In this demo, scrollIntent.js is used to intuitively hide/show the header when it appears the user is focused on content/navigating elsewhere.

ScrollIntent.js is given 5 actions that describe the behaviour of a user and what functionality should be executed based on that behaviour.

Actions

The following actions are used to hide/show the navigation header when necessary:

Hide the header when the user scrolls down past a waypoint at 300px
Show the header when the user scrolls up past a waypoint at 300px
Show the header when a user scrolls faster than 150px per 250ms, anywhere after the waypoint at 300px
Hide the header when a user scrolls slower than 150px per 250ms, for at least 500ms, anywhere after the waypoint at 300px (using only the scrollbar or mousewheel)
Hide the header when a user scrolls slower than 150px per 250ms, anywhere after the waypoint at 300px (using only the keyboard's up/down keys)

In code, these actions are written like so:


      var actions = [
  {
    waypoint: 300,
    direction: "down",
    callback: function() {

      preventShow = true;
      menu.hide();
    }
  },

  {
    waypoint: 300,
    direction: "up",
    callback: function() {

      menu.show();
    }
  },

  {
    minWaypoint: 300,
    minSpeed: 60,
    callbacksPerAction: 1,
    callback: function() {

      preventHide = true;

      if(preventShow === false) {
        menu.show();
      }
    }
  },

  {
    minWaypoint: 300,
    maxSpeed: 60,
    scrollMethod: ["scrollbar", "mousewheel"],
    minDuration: 500,
    callbacksPerAction: 1,
    callback: function() {

      if(preventHide === false) {
        menu.hide();
      }
    }
  },

  {
    minWaypoint: 300,
    maxSpeed: 60,
    scrollMethod: ["down", "up"],
    callbacksPerAction: 1,
    callback: function() {

      if(preventHide === false) {
        menu.hide();
      }
    }
  }
];

// Setup scrollIntent
var scrollIntent = new ScrollIntent(window, actions, options);


scrollIntent.scrollingStopped = function() {
  preventShow = false;
  preventHide = false;
}

When passed the 300px waypoint, try scrolling at difference speeds to see the header hide/show as necessary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis vel orci sit amet placerat. Morbi eget elementum nisl. Quisque accumsan magna vel lorem mollis, vitae vulputate libero gravida. Suspendisse viverra luctus nulla at ultrices. Duis non mauris dignissim nibh vulputate ullamcorper. Curabitur accumsan molestie consectetur. Aenean ultrices risus in magna volutpat porttitor. Morbi ac orci volutpat, molestie massa vel, dictum nibh. In eget massa quam. Donec convallis eros purus, mattis accumsan lectus mollis at. Aliquam varius, lectus eget venenatis volutpat, lorem risus semper urna, nec rutrum purus metus sit amet metus. Proin ut urna tellus. Nullam nec lorem enim.

Duis vel ante at odio dapibus posuere. Aenean vel nibh nulla. Vestibulum porttitor orci eu nisi dapibus condimentum. Sed sollicitudin, metus a tristique mollis, ipsum enim viverra dolor, porttitor porttitor leo urna a lectus. Vivamus ut dui eleifend, pulvinar mi sit amet, dapibus elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam porta turpis est, non mollis lacus tincidunt a. Suspendisse ut felis congue, interdum nisl a, molestie nunc. Mauris porta dui ut lorem eleifend, ac aliquam dolor gravida. Curabitur luctus libero vel sem ullamcorper, a semper sem tincidunt. Nullam erat nisl, euismod sed dapibus id, facilisis ut arcu. In auctor adipiscing ullamcorper. Phasellus porta, purus ut condimentum ullamcorper, purus turpis interdum nisi, sit amet tempus massa orci quis massa. Integer non sem quis eros gravida volutpat nec eu mi. Integer ac elementum nibh.

Etiam sit amet tortor ultricies, sollicitudin arcu aliquam, semper lectus. Nulla nec metus justo. Mauris condimentum eget metus eget pellentesque. Ut sit amet augue eget enim interdum commodo sit amet ut felis. Aliquam pretium pulvinar nulla. Aliquam erat volutpat. Cras imperdiet massa quis elit posuere, ut ullamcorper dui aliquam. Nam non laoreet lectus. Fusce commodo diam ac lorem auctor consectetur.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed purus leo. Nunc rutrum odio eu pretium sagittis. In hac habitasse platea dictumst. Quisque condimentum euismod tellus eu dapibus. Pellentesque non sapien imperdiet, posuere urna non, cursus lacus. Vivamus egestas non nibh ut accumsan. Sed volutpat nisi in feugiat vestibulum. Suspendisse dapibus lorem eu tincidunt bibendum. Maecenas vestibulum dolor sed tempor molestie.