Semantic UI menu Stick error: "Sticky: Element is hidden, you must call refresh after element becomes visible"

Question

Semantic UI menu Stick error: "Sticky: Element is hidden, you must call refresh after element becomes visible"

Navigation

#1 by (0 votes)

1

I am using Semantic UI , and when using Menu Sticky , when it is "hidden" for resolutions lower than 630px, with the code below:

    @media all and (max-width: 630px){
    #top_menu {
        display: none;
    }
    #m_btn{
        display: inline-block;
        padding: 0px auto;
    }
}

A button is displayed, so everything works fine, but when you access the home of the site it displays the error:

"Sticky: Element is hidden, you must call refresh after element becomes visible "

Would anyone know how to fix the reported error?

semantic-ui

asked by anonymous 04.05.2016 / 16:50

1 answer

How to protect access tokens in a Web application? How to set the size of an ExpandableListView icon?

score 0 · Answer 1

According to documentation , for performance reasons, the default behavior requires you to manually call the method $('.ui.sticky').sticky('refresh'); whenever element is modified:

Sticky uses mutation observers to adjust its position when content is added to the context, and will also automatically recalculate on browser resize, but any other changes to your page that require the context to refresh the sticky position. >

However, there is a "final solution" that allows automatic updating:

$('.ui.sticky').sticky({
  context: '#exemplo',
  observeChanges: true
});