Липкое меню внутри сетки не работает в Semantic 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

Эта проблема никоим образом не связана с семантическим пользовательским интерфейсом, а связана с тем, что я разрабатываю одностраничное приложение.

Все на веб-сайте загружается динамически, когда это необходимо, поэтому большую часть времени, когда инициализируются различные контроллеры Angular, содержимое не на месте, но при этом представление имеет высоту 0 пикселей, и, таким образом, липкий модуль Semantic UI инициализируется с помощью контекст высоты 0 пикселей.

Чтобы решить эту проблему, я просто обновляю липкое меню на каждом событии прокрутки. Это гарантирует, что липкое меню работает правильно.

Answer 2

@siannone Если "липкий модуль семантического пользовательского интерфейса инициализируется с контекстом высоты 0 пикселей", делает

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

Работа? Это заставляет его обращаться к себе.

Answer 3

У меня была аналогичная проблема. Содержимое div "ui sticky" загружалось динамически. Решением для меня был звонок

      $('.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'});
    }
});