CSS has come a long way. Previously, if you want to make an HTML element sticky (floating) as you scroll the page, you'd have to use Javascript + CSS to make it work. The floating bar in the Topic page in vB5 is actually implemented using this old technique. Now, you only need CSS using the powerful position sticky CSS property.
The most commonly asked request in web development was "How to make the table header sticky?". Before, it would take a lot of JS code to implement it and make it work perfect or near perfect. But now, all you have to do is use position sticky!
What is position sticky?
From MDN Web Docs:
Browser Support:
All modern browsers support position sticky. Old browsers such as IE and Opera Mini are not supported but who uses them, anyway? Please see compatibility chart for more details.
Code
To implement sticky for Forum Category Headers and Module Headers in vB5, add this custom CSS in css_additional:
The above code basically says, "For all modules except conversation detail module (i.e. Topic page) and Activity Stream widgets (e.g. Latest Activity tab) and anything that already has an existing floating bar, make the module header sticky".
For other websites:
Find the element you want to be sticky. Using CSS class or id selector, add position: sticky in the CSS and specify top or bottom property similar to the CSS code above. You may also need to specify a higher z-index if the sticky element goes behind an element.
Demo:
Observe homepage on this site or watch the screencast video below to see it in action:
The most commonly asked request in web development was "How to make the table header sticky?". Before, it would take a lot of JS code to implement it and make it work perfect or near perfect. But now, all you have to do is use position sticky!
What is position sticky?
From MDN Web Docs:
Originally posted by MDN
Browser Support:
All modern browsers support position sticky. Old browsers such as IE and Opera Mini are not supported but who uses them, anyway? Please see compatibility chart for more details.
Code
To implement sticky for Forum Category Headers and Module Headers in vB5, add this custom CSS in css_additional:
Code:
/* Sticky Forum Category Headers and Module Headers - START */ .b-module:not(.forum-conversation-content-widget):not(.activity-stream-widget) .widget-header { position: sticky; top: 0; z-index: 2; } .forum-list-container .category-header { position: sticky !important; top: 0; z-index: 1; } /* Sticky Forum Category Headers and Module Headers - END */
For other websites:
Find the element you want to be sticky. Using CSS class or id selector, add position: sticky in the CSS and specify top or bottom property similar to the CSS code above. You may also need to specify a higher z-index if the sticky element goes behind an element.
Demo:
Observe homepage on this site or watch the screencast video below to see it in action:
Comment