A smooth floating header that hides when scrolling down but reappears when scrolling up or reaching the bottom of the page. Plus, an article progress bar using global CSS variables for seamless performance.

🚀 Live Demo on CodePen

Why Use Trig.js?

Trig.js makes scroll-based animations lightweight and efficient by leveraging CSS variables and requestAnimationFrame. Unlike bloated alternatives, it keeps animations smooth and performant.

Features in This Example

✅ A floating header that hides on scroll down and reappears on scroll up or at the page bottom.

✅ A dynamic progress bar indicating how much of the article has been read.

✅ Uses data-trig-global="true" to make CSS variables add to the body tag.

✅ Pure CSS-based transformations for optimal performance.

How It Works

This example uses trig-scroll-up, trig-scroll-down, and trig-scroll-bottom classes to control the header visibility. The progress bar utilizes --trig-article as a CSS variable to track scroll progress.

HTML Structure 

class="header slide">
         class="logo">Trig.js
         class="menu">
            
                 class="mobileMenu">≡
                Home
                About
                Blog
                Contact Us
            
        
         class="progress">
             class="progressBar">

CSS Styling 

.trig-scroll-down .slide {
    transform: translateY(calc(-100% + 10px));
}
.trig-scroll-top .slide,
.trig-scroll-bottom .slide,
.trig-scroll-up .slide {
    transform: translateY(0px);
}
.progressBar:after {
    content: "";
    height: 10px;
    width: 100%;
    transform: scaleX(var(--trig-article));
    transform-origin: left;
    background-color: #1b8237;
    display: block;
    transition: transform ease-out 0.3s;
}

JavaScript (Trig.js) 

<span class="na">src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

No extra JS needed—Trig.js automatically updates the CSS variables based on scrolling.

More Trig.js Examples

🔹 Best AOS (Animation on Scroll) Libraries in 2025

🔹 Mobile Rubber Banding Effect with Trig.js

Get Started With Trig.js

Let me know what you think in the comments! 🚀