Scroll Effects
Overview
The Phenix Design System provides powerful scroll-related effects and utilities that enhance user experience through smooth scrolling, position tracking, and sticky elements. These features are implemented through JavaScript/TypeScript and are designed to be lightweight, performant, and easy to implement.
Smooth Scroll
The smoothScroll
method creates animated scrolling to specific elements on the page, providing a more polished user experience than the default browser jump.
smoothScroll(options?: {
target?: string; // Target selector to scroll to
offset?: number; // Decrease target position by [number]
into?: number; // Increase target position by [number]
duration?: number; // Scroll animation duration in milliseconds
delay?: number; // Delay before scroll in milliseconds
}): this
Parameters
target
: CSS selector for the element to scroll to (fallback if not specified in HTML)offset
: Decreases the final scroll position by the specified number of pixelsinto
: Increases the final scroll position by the specified number of pixelsduration
: Animation duration in milliseconds (default: 700)delay
: Delay before starting the animation in milliseconds (default: 0)
Note: You cannot use both
offset
andinto
together; choose one or the other.
HTML Attributes
The method also supports HTML data attributes for inline configuration:
href
: Used for link elements to specify the targetdata-target
: Alternative to href for non-anchor elementsdata-duration
: Animation duration in millisecondsdata-offset
: Decrease target position by [number]data-into
: Increase target position by [number]data-delay
: Delay before scroll in milliseconds
Examples
Basic Usage:
// Apply smooth scroll to all elements with class 'scroll-trigger'
Phenix('.scroll-trigger').smoothScroll();
With Options:
// Apply smooth scroll with custom options
Phenix('.scroll-trigger').smoothScroll({
duration: 700,
offset: 50,
delay: 100
});
HTML Implementation:
<!-- As a link -->
<a href="#section-id" class="scroll-trigger">Scroll to Section</a>
<!-- As a button -->
<button data-target="#section-id" class="scroll-trigger">Scroll to Section</button>
<!-- With inline options -->
<a href="#section-id" class="scroll-trigger" data-duration="500" data-offset="20">
Scroll to Section
</a>
Sticky Elements
The sticky
method allows elements to become fixed or sticky when the user scrolls past a certain point. This is useful for navigation bars, sidebars, and other elements that should remain visible while scrolling.
sticky(options?: {
type?: string; // Position type: 'fixed' or 'sticky'
offset?: number; // Decrease target position by [number]
into?: number; // Increase target position by [number]
flow?: string; // Scroll direction: 'x' or 'y'
active?: string; // Active class name
}): this
Parameters
type
: Position type, either "sticky" (default) or "fixed"active
: Class name to add when the element becomes sticky (default: "is-sticky")flow
: Scroll direction, either "y" (vertical, default) or "x" (horizontal)offset
: Decreases the sticky trigger position by the specified number of pixelsinto
: Increases the sticky trigger position by the specified number of pixels
Note: You cannot use both
offset
andinto
together; choose one or the other.
HTML Attributes
The method also supports HTML data attributes for inline configuration:
data-offset
: Decrease sticky trigger position by [number]data-into
: Increase sticky trigger position by [number]
Examples
Basic Usage:
// Make navbar sticky with default options
Phenix('.navbar').sticky();
With Options:
// Make sidebar sticky with custom options
Phenix('.sidebar').sticky({
type: "sticky",
active: "is-sticky",
flow: 'y',
offset: 20
});
HTML Implementation:
<!-- Basic sticky element -->
<nav class="navbar" data-sticky>...</nav>
<!-- With inline options -->
<div class="sidebar" data-sticky data-offset="30">...</div>
Scroll Spy
The scrollSpy
method creates a scroll tracker that highlights navigation items based on the current scroll position. This is particularly useful for table of contents, navigation menus, and step indicators.
scrollSpy(options?: {
active?: string; // Active class name
flow?: string; // Scroll direction: 'start', 'end', or 'both'
offset?: number; // Decrease target position by [number]
into?: number; // Increase target position by [number]
}): this
Parameters
active
: Class name to add to active elements (default: "px-active")flow
: Direction to track scrolling, either "start", "end", or "both" (default: "both")offset
: Decreases the tracking position by the specified number of pixelsinto
: Increases the tracking position by the specified number of pixels
Note: You cannot use both
offset
andinto
together; choose one or the other.
HTML Attributes
The method also supports HTML data attributes for inline configuration:
data-flow
: Scroll direction to trackdata-offset
: Decrease tracking position by [number]data-into
: Increase tracking position by [number]
Examples
Basic Usage:
// Create scroll spy on a navigation menu
Phenix('.scroll-tracker').scrollSpy();
With Options:
// Create scroll spy with custom options
Phenix('.scroll-tracker').scrollSpy({
active: "active-section",
flow: 'start',
offset: 50
});
HTML Implementation:
<!-- Scroll spy navigation -->
<ul class="scroll-tracker">
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
<!-- Target sections -->
<div id="section-1">Section 1 content...</div>
<div id="section-2">Section 2 content...</div>
<div id="section-3">Section 3 content...</div>
Practical Examples
Table of Contents with Scroll Spy
<div class="page-layout">
<!-- Table of Contents -->
<nav class="toc sticky">
<ul class="scroll-tracker">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</nav>
<!-- Content Sections -->
<div class="content">
<section id="introduction">
<h2>Introduction</h2>
<p>Content here...</p>
</section>
<section id="features">
<h2>Features</h2>
<p>Content here...</p>
</section>
<!-- More sections... -->
</div>
</div>
// Make the TOC sticky
Phenix('.toc').sticky({
offset: 20
});
// Initialize scroll spy
Phenix('.scroll-tracker').scrollSpy({
active: "current-section",
offset: 100
});
// Add smooth scrolling to TOC links
Phenix('.scroll-tracker a').smoothScroll({
offset: 50,
duration: 600
});
Fixed Header with Scroll-Up Reveal
<header class="site-header">
<div class="logo">Logo</div>
<nav class="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
// Variables to track scroll position
let lastScrollTop = 0;
const header = document.querySelector('.site-header');
// Make header sticky
Phenix(header).sticky({
active: "is-sticky"
});
// Add scroll direction detection
window.addEventListener('scroll', function() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
// Scrolling down - hide header
header.classList.add('header-hidden');
} else {
// Scrolling up - show header
header.classList.remove('header-hidden');
}
lastScrollTop = scrollTop;
});
Browser Compatibility
The Phenix Scroll Effects are built using modern JavaScript techniques and are compatible with all modern browsers. The animations use requestAnimationFrame
for smooth performance and optimal rendering.
Integration with Other Features
The Scroll Effects in Phenix are designed to work seamlessly with other components of the framework:
- DOM UI Effects: Combine with fade/slide effects for enhanced interactions
- DOM Events: Use with event handling for custom scroll behaviors
- Animation System: For more complex scroll-triggered animations