Modern Floating Header With Article Progress Bar Using Trig.js

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

<header>
    <div class="header slide">
        <div class="logo">Trig.js</div>
        <div class="menu">
            <ul>
                <li class="mobileMenu">&#8801;</li>
                <li>Home</li>
                <li>About</li>
                <li>Blog</li>
                <li>Contact Us</li>
            </ul>
        </div>
        <div class="progress">
            <div class="progressBar"></div>
        </div>
    </div>
</header>

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)

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

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

📖 Docs: Trig.js Documentation
⭐ GitHub: Trig.js Repo

Let me know what you think in the comments! 🚀

iDev-Games @idevgames