How to Make the "Scroll to View" Label Sticky Above the Table When Scrolling Horizontally
Last updated 3 weeks, 5 days ago | 37 views 75 5
Forth page link: How to Show "Scroll to View" Label Only When Table Overflows (with jQuery)
Awesome!
Let’s make the "Scroll to view " notice even cooler by making it sticky while the user scrolls sideways across the wide table!
This creates a really polished, professional UX — especially on mobile devices where horizontal scrolling is common.
Step-by-Step Plan:
-
Wrap the table inside a
.table-wrapperdiv (we already did this). -
Insert a
.scroll-noticediv before the wrapper. -
Make the
.scroll-noticeposition: sticky so it stays at the top edge of the table-wrapper during horizontal scroll. -
Ensure it scrolls with the table, not with the whole page.
✅ Updated CSS for Sticky Behavior
Add this to your <style> section:
.table-wrapper {
overflow-x: auto;
max-width: 100%;
border: 2px solid #ccc;
margin: 20px 0;
padding-top: 30px; /* add padding for sticky label */
position: relative; /* important for sticky context */
}
.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;
}
✅ Key changes:
-
.table-wrapper { position: relative; }→ needed for sticky child inside. -
.scroll-notice { position: absolute; }→ makes the label float above the table. -
white-space: nowrap;→ prevents the label text from wrapping onto multiple lines.
✅ Updated HTML Structure (Important)
Now we slightly change the HTML wrapping.
Instead of putting the .scroll-notice outside the .table-wrapper,
we'll move it inside like this:
<div class="table-wrapper">
<div class="scroll-notice">Scroll to view</div>
<table> ... </table>
</div>
✅ This makes the label move only with the table, not the whole page!
✅ Updated jQuery Code
$(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>');
}
}
});
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();
}
});
}
updateScrollNotices();
$(window).on('resize', function() {
updateScrollNotices();
});
});
✅ Now .scroll-notice is inside .table-wrapper so it moves horizontally during scroll!
Full Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Scroll Notice for Wide Tables</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;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px; /* simulate wide tables */
}
th, td {
border: 1px solid #aaa;
padding: 8px 12px;
text-align: left;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Small Table (No Scroll Notice)</h2>
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>John</td><td>25</td><td>New York</td></tr>
<tr><td>Jane</td><td>30</td><td>Los Angeles</td></tr>
</table>
<h2>Large Table (Sticky Scroll Notice)</h2>
<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>
<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>');
}
}
});
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();
}
});
}
updateScrollNotices();
$(window).on('resize', function() {
updateScrollNotices();
});
});
</script>
</body>
</html>
Bonus Tips:
-
Sticky with background:
Always set a background (background: #f9f9f9) on sticky labels, otherwise scrolling under a transparent label might look weird. -
Fancy Scroll Animations:
You can animate the label with CSS transitions if you want smooth movement. -
Dynamic Tables:
If you're loading tables via AJAX later, simply callupdateScrollNotices()again after inserting tables.
Final Look
✅ Sticky label above the table.
✅ Label scrolls horizontally with the table.
✅ Label appears only if needed.
✅ Resizes dynamically.
Super clean, smart, mobile-friendly!
See one more advanced version too.
For example: "Auto-hide the label after a few seconds if the user starts scrolling the table"
Would be cool for even better UX!
Click here
