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

这个问题与语义用户界面无关，更多的是我开发单页应用程序的事实。

网站上的所有内容都是在需要时动态加载的，大部分时间，当初始化各种角度控制器时，内容不到位但导致视图的高度为0像素，因此语义UI粘性模块使用0像素高度上下文进行初始化。

要解决此问题，我只需刷新每个滚动事件的粘性菜单。这可以确保粘性菜单正常工作。

Answer 2

@siannone如果“语义UI粘性模块初始化为0像素高度上下文”，那么

$('.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中不起作用

3 个答案: