Announcement

Collapse
No announcement yet.

How to make Sticky Headers for vBulletin 5 or any website with just few lines of CSS and without JS

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to make Sticky Headers for vBulletin 5 or any website with just few lines of CSS and without JS

    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.

    Click image for larger version  Name:	sticky-headers2.png Views:	0 Size:	68.7 KB ID:	24423





    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
    The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
    This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

    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 */
    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:
    glennrocksvb
    Founder/Coder
    Last edited by glennrocksvb; 03-21-2022, 03:04 PM. Reason: Updated CSS code
    Helpful? Donate. Thanks!
    Fast VPS Host for vBulletin: A2 Hosting & IONOS

    #2
    Glenn, so If I put your code above in it should work?

    Comment


    #3
    Can I use this technique to make the right side column be sticky?
    Thanks!

    Comment


      #4
      This seems to work...

      /* Sticky Forum Right Column - START */

      .canvas-widget-list {
      position: sticky !important;
      top: 0;
      z-index: 1;
      }
      /* Sticky Forum Right Column - END */

      ...but still testing

      Comment


        #5
        It causes some issues on mobile, but I really need it only on desktop.
        Any help? Thanks

        Comment


          #6
          I use this technique in the right side column on the topic page here. Which pages do you want this on?

          This code will apply to all pages on desktop that have the right side column

          Code:
          .l-desktop .canvas-widget-list.l-col__fixed-6 {
              position: sticky;
              top: 0;
          }
          It needs to be tweaked if you want to exclude some pages.
          Helpful? Donate. Thanks!
          Fast VPS Host for vBulletin: A2 Hosting & IONOS

          Comment


            #7
            Works great, thanks!

            Comment

            Latest Topics

            Collapse

            Working...
            X