Sticky Class not working

Created on 8 April 2015, over 9 years ago
Updated 30 January 2023, almost 2 years ago

According to this post on the Foundation forum we should be able to wrap an element (say, the breadcrumbs or another horizontal div) in a <div class="sticky"> and it'll auto-stick to the top of the page (and have a 'fixed' class added when it does that).

I tried this with the existing header nav and it worked...but then I try it with something else (the breadcrumbs) and it doesn't work. Am I missing something or does this not work on elements other than the built-in top nav bar in the latest dev?

πŸ› Bug report
Status

Postponed: needs info

Version

5.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States Rob_Feature

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • with position sticky you should give top/bottom property too 

    position: -webkit-sticky;
    
    position: sticky;
    
    top: 80px;

    position sticky won't work if overflow property is given to parent (any parent)
    second write below code to console.log and see where overflow property is coming
    let parent = document.querySelector('.sticky').parentElement;

    while (parent) {
        const hasOverflow = getComputedStyle(parent).overflow;
        if (hasOverflow !== 'visible') {
            console.log(hasOverflow, parent);
        }
        parent = parent.parentElement;
    }

    Mostly it's in dialog-off-canvas-main-canvas. locate and add below property to your js folder

    if($('.sticky').length > 0){
    $('.dialog-off-canvas-main-canvas').css('overflow', 'inherit')
    }
Production build 0.71.5 2024