Rhye

# Smooth Scroll

The template includes a smooth page scrolling plugin. It is enabled by default on pages with a main wrapper that has the js-smooth-scroll ID.

# Markup

<!-- PAGE MAIN -->
<div class="js-smooth-scroll" id="page-wrapper" data-barba="container">
  <main class="page-wrapper__content">
    ...
  </main>
</div>
<!-- - PAGE MAIN -->

WARNING

Note: For the sake of good UX for mobile users, Smooth Scroll is always OFF on touch devices.

# Absolute & Fixed Elements

# Example 1: Positioning Page Header Absolutely

To position an element absolutely OUTSIDE the scrolling container, add the data-arts-scroll-absolute attribute.

<header
  class="header header_menu-right header_absolute container-fluid"
  id="page-header"
  data-arts-scroll-absolute="true"
>
  ...
</header>

# Example 2: Fixing Page Masthead on Scrolling

To fix an element INSIDE the scrolling container, add the data-arts-scroll-fixed attribute.

<section 
  class="section section-masthead section-masthead_fixed section-fullheight text-center"
  data-arts-scroll-fixed="true"
  data-arts-theme-text="light"
  data-arts-os-animation="true"
>
  ...
</section>

← AJAX Transitions →