网格内的粘性菜单在语义中不起作用 UI

Question

我想在我的页面上有一个粘性菜单，但我无法让它工作。

这是我当前的设置：

<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>

然后我使用以下方法初始化粘性菜单：

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

Answer 1

问题与语义无关 UI，但更多的是我正在开发单页应用程序。

网站上的所有内容都是在需要时动态加载的，所以大多数时候，当各种 Angular 控制器初始化时，内容还没有到位，导致视图的高度为 0 像素，并且因此，语义 UI 粘性模块使用 0 像素高度上下文进行初始化。

为了解决这个问题，我只是在每次滚动事件时刷新粘性菜单。这可确保粘性菜单正常工作。

Answer 2

@siannone 如果 "the Semantic UI sticky module is initialized with a 0 pixels height context"，是否

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

工作？这使它引用自己。

Answer 3

我遇到了类似的问题。 “ui sticky”div 的内容是动态加载的。我的解决方案是调用

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

每次置顶内容div改变时

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

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

网格内的粘性菜单在语义中不起作用 UI

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

semantic-ui