1. Please scroll 😁

    doormat

  2. How about something a little different for navigating through your site content?

  3. How does this work? It's actually quite simple.

    The trick is possible by making sections of the page position: fixed and then setting a height for the document body equal to the combined height of the page sections.

    When the window is scrolled down we move our page sections upwards out of the viewport to reveal the content underneath. The opposite being that, when the window is scrolled up, we bring our sections back down into view in the same order in which they left(dictated by the DOM structure).

  4. Using doormat

    1. Include doormat{.min}.js and doormat{.min}.css in your page.
    2. Create your DOM/Page structure. The containing element needs the classname `dm`. This could be `body`. `doormat` uses panels for each section of content. Therefore, the children of our container need the class `dm-pnl`. `ol` and `ul` make good container elements. A structure like the following is ideal.
      <body>
        <ol class="dm">
          <li class="dm__pnl">Awesome</li>
          <li class="dm__pnl">Site</li>
          <li class="dm__pnl">Content</li>
        </ol>
      </body>
    3. Invoke the Doormat function passing in desired options(refer to docs for help). For example;

      var myDoormat = new Doormat();
      var myDoormat = new Doormat({
        debounce: 100,
        snapping: {
          travel: false,
          viewport: true,
          threshold: 25,
          duration: 250
        }
      });
  5. That's it!

    For more, see the repo!