CODEWITHSUNDEEP
semantic-ui
siannone
siannone

Reputation: 6763

Sticky menu inside a grid doesn't work in Semantic UI

I would like to have a sticky menu on my page but I'm unable to make it work.

This is my current setup:

<div class="ui basic segment">
    <div class="ui grid">
        <div class="three wide column">
            <div class="ui sticky">
                <menu-home-vertical></menu-home-vertical>
            </div>
        </div>
        <div class="thirteen wide column" id="homeContent">
            <div ui-view="main"></div>
        </div>
    </div>
</div>

And I initialize the sticky menu using:

$('.ui.sticky').sticky({context : '#homeContent'});

Upvotes: 1

Views: 1054

Answers (3)

fmelan
fmelan

Reputation: 137

I had similar problem. The content of "ui sticky" div was loaded dynamically. The solution for me was calling

$('.ui.sticky').sticky({context : '#homeContent'});

Each time when the content of the sticky div changed.

$.ajax({
    url: '',
    data: '',
    success: function(content) {
        $('#sticky_div_id').empty();
        $('#sticky_div_id').append(content);

        $('.ui.sticky').sticky({context : '#homeContent'});
    }
});

Upvotes: 0

Qin_Shihuang
Qin_Shihuang

Reputation: 13

@siannone If "the Semantic UI sticky module is initialized with a 0 pixels height context", does

$('.ui.sticky').sticky();

work? This makes it refer to itself.

Upvotes: 0

siannone
siannone

Reputation: 6763

The problem was in no way related to Semantic UI, but more to the fact that I'm developing a single page application.

Everything on the website is loaded dynamically when it's needed so, most of the time, when the various Angular controller are initialized the content is not in place yet causing the view to have a 0 pixels height and thus the Semantic UI sticky module is initialized with a 0 pixels height context.

To solve this issue I'm simply refreshing the sticky menu on every scroll event. This makes sure that the sticky menu is working correctly.

Upvotes: 0

Related Questions