Dynamic Color Changing Scroll Progress Bar in jQuery
Last updated 3 weeks, 4 days ago | 36 views 75 5
Eighth page link: Add a "Back to Start" Button for Wide Tables Jquery
Yesss!
You’re unstoppable today — let's make your scroll progress bar even sexier!
✨ What We'll Do:
Instead of a static green bar,
we'll make it change color smoothly as the user scrolls:
| Scroll % | Color |
|---|---|
| 0–50% | Green |
| 51–80% | Yellow |
| 81–100% | Red |
✅ More interactive
✅ Visually intuitive
✅ Looks super premium!
Updated Full Plan
We will:
-
Track the percentage scrolled horizontally.
-
Change the color of
.scroll-progressbased on how far the user has scrolled.
✅ Updated jQuery Code (Full)
$(document).ready(function() {
$("table").each(function() {
var columnCount = $(this).find('tr:first-child td, tr:first-child th').length;
if (columnCount > 5) {
if (!$(this).parent().hasClass('table-wrapper')) {
$(this).wrap("<div class='table-wrapper'></div>");
$(this).before('<div class="scroll-notice" style="display:none;">Scroll to view ➡️</div><div class="scroll-progress"></div><div class="back-to-start" style="display:none;">⇤ Back to Start</div>');
}
}
});
function updateScrollNotices() {
$(".table-wrapper").each(function() {
var $wrapper = $(this);
var $table = $wrapper.find('table');
var $notice = $wrapper.find(".scroll-notice");
if ($table.outerWidth() > $wrapper.width()) {
$notice.show();
} else {
$notice.hide();
}
});
}
function updateProgressBar($wrapper) {
var scrollLeft = $wrapper.scrollLeft();
var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
var progressPercent = (scrollLeft / scrollWidth) * 100;
var $progress = $wrapper.find('.scroll-progress');
$progress.css('width', progressPercent + "%");
// Dynamic color change
if (progressPercent <= 50) {
$progress.css('background', '#4caf50'); // Green
} else if (progressPercent > 50 && progressPercent <= 80) {
$progress.css('background', '#ffeb3b'); // Yellow
} else {
$progress.css('background', '#f44336'); // Red
}
}
function updateBackToStartButton($wrapper) {
var scrollLeft = $wrapper.scrollLeft();
var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
var $backButton = $wrapper.find('.back-to-start');
if (scrollLeft > (scrollWidth * 0.2)) { // show if scrolled more than 20%
$backButton.fadeIn();
} else {
$backButton.fadeOut();
}
}
updateScrollNotices();
$(window).on('resize', function() {
updateScrollNotices();
});
$(".table-wrapper").each(function() {
var $wrapper = $(this);
var $notice = $wrapper.find(".scroll-notice");
var $backButton = $wrapper.find(".back-to-start");
var timer = null;
$wrapper.on('scroll', function() {
if ($notice.is(":visible")) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
$notice.fadeOut();
}, 3000);
}
updateProgressBar($wrapper);
updateBackToStartButton($wrapper);
});
// Back to Start click
$backButton.on('click', function() {
$wrapper.animate({scrollLeft: 0}, 600);
});
// Initial setup
updateProgressBar($wrapper);
updateBackToStartButton($wrapper);
});
});
✅ CSS (No changes needed except maybe minor improvement)
You can keep .scroll-progress basic:
.scroll-progress {
height: 4px;
background: #4caf50; /* initial green */
width: 0%;
position: absolute;
top: 28px;
left: 0;
transition: width 0.2s ease, background 0.4s ease;
z-index: 5;
}
✅ Notice: We added transition: background 0.4s to make color changes smooth too!
Full Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Color Changing Scroll Progress Bar in jQuery</title>
<style>
.table-wrapper {
overflow-x: auto;
max-width: 100%;
border: 2px solid #ccc;
margin: 20px 0;
padding-top: 30px;
position: relative;
}
.scroll-notice {
position: absolute;
top: 0;
left: 0;
background: #f9f9f9;
padding: 6px 10px;
font-size: 14px;
color: #555;
font-style: italic;
white-space: nowrap;
z-index: 10;
display: none;
}
.scroll-progress {
height: 4px;
background: #4caf50; /* initial green */
width: 0%;
position: absolute;
top: 28px;
left: 0;
transition: width 0.2s ease, background 0.4s ease;
z-index: 5;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #aaa;
padding: 8px 12px;
text-align: left;
}
.back-to-start {
position: absolute;
bottom: 10px;
right: 10px;
background: #4caf50;
color: #fff;
padding: 8px 14px;
font-size: 14px;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: background 0.3s;
z-index: 20;
}
.back-to-start:hover {
background: #388e3c;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="table-wrapper">
<div class="scroll-notice">Scroll to view ➡️</div>
<div class="scroll-progress"></div>
<div class="back-to-start" style="display: none;">⇤ Back to Start</div>
<table>
<tr>
<th>Product</th><th>Price</th><th>Stock</th><th>SKU</th><th>Category</th><th>Brand</th>
</tr>
<tr>
<td>Phone</td><td>$699</td><td>Available</td><td>PH1234</td><td>Electronics</td><td>Samsung</td>
</tr>
<tr>
<td>Laptop</td><td>$999</td><td>Available</td><td>LT5678</td><td>Electronics</td><td>Dell</td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$("table").each(function() {
var columnCount = $(this).find('tr:first-child td, tr:first-child th').length;
if (columnCount > 5) {
if (!$(this).parent().hasClass('table-wrapper')) {
$(this).wrap("<div class='table-wrapper'></div>");
$(this).before('<div class="scroll-notice" style="display:none;">Scroll to view ➡️</div><div class="scroll-progress"></div><div class="back-to-start" style="display:none;">⇤ Back to Start</div>');
}
}
});
function updateScrollNotices() {
$(".table-wrapper").each(function() {
var $wrapper = $(this);
var $table = $wrapper.find('table');
var $notice = $wrapper.find(".scroll-notice");
if ($table.outerWidth() > $wrapper.width()) {
$notice.show();
} else {
$notice.hide();
}
});
}
function updateProgressBar($wrapper) {
var scrollLeft = $wrapper.scrollLeft();
var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
var progressPercent = (scrollLeft / scrollWidth) * 100;
var $progress = $wrapper.find('.scroll-progress');
$progress.css('width', progressPercent + "%");
// Dynamic color change
if (progressPercent <= 50) {
$progress.css('background', '#4caf50'); // Green
} else if (progressPercent > 50 && progressPercent <= 80) {
$progress.css('background', '#ffeb3b'); // Yellow
} else {
$progress.css('background', '#f44336'); // Red
}
}
function updateBackToStartButton($wrapper) {
var scrollLeft = $wrapper.scrollLeft();
var scrollWidth = $wrapper.get(0).scrollWidth - $wrapper.width();
var $backButton = $wrapper.find('.back-to-start');
if (scrollLeft > (scrollWidth * 0.2)) { // show if scrolled more than 20%
$backButton.fadeIn();
} else {
$backButton.fadeOut();
}
}
updateScrollNotices();
$(window).on('resize', function() {
updateScrollNotices();
});
$(".table-wrapper").each(function() {
var $wrapper = $(this);
var $notice = $wrapper.find(".scroll-notice");
var $backButton = $wrapper.find(".back-to-start");
var timer = null;
$wrapper.on('scroll', function() {
if ($notice.is(":visible")) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
$notice.fadeOut();
}, 3000);
}
updateProgressBar($wrapper);
updateBackToStartButton($wrapper);
});
// Back to Start click
$backButton.on('click', function() {
$wrapper.animate({scrollLeft: 0}, 600);
});
// Initial setup
updateProgressBar($wrapper);
updateBackToStartButton($wrapper);
});
});
</script>
</body>
</html>
Final Behavior:
✅ Start with Green (Safe, early scrolling)
✅ Move to Yellow (Careful, you're mid-table)
✅ Finally Red (Warning, you're at the end!)
Super clear for users!
Pro Tips:
-
Gradient Smoothness:
If you want ultra-smooth color shifting (like continuous gradient), you can calculate color blending too! (advanced) -
Use Different Colors:
Instead of traffic-light colors, you can use Blue → Purple → Pink, etc., for different website vibes. -
Add Text Label:
You could even show "Start", "Midway", "End" text as the user scrolls if needed.
Common Mistakes to Avoid:
-
Forgetting to add transition on background for smooth color change.
-
Not resetting colors if user scrolls back left.
-
Forgetting about smaller mobile screens — test it everywhere!
Now your table not only scrolls, it talks visually to your users!
Would you also like me to show a bonus extra:
Make the Back-to-Start button pulse or bounce slightly for extra attention when visible
It looks really catchy and users never miss the button!
