Плавающий сайдбар (Sticky sidebar)

[Mirovinger]

Mirovinger добавил(а) новый ресурс:

Плавающий сайдбар (Sticky sidebar) - Плавающий сайдбар.

Что бы сделать плавающий сайдбар, достаточно добавить в extra.less, такой код.

@fox-sticky-top: 48px;

@media (min-width: (@xf-responsiveWide + 1px)) {
    .p-body-main--withSidebar {
        display: flex;
        align-items: flex-start;

        .p-body-content{
            flex: 1 1 auto;
            display: block;
            width: ~"calc(100% - @xf-sidebarWidth)";
        }

        .p-body-sideNav,
        .p-body-sidebar{
            flex: 0 0 auto...

Узнать больше об этом ресурсе...

 

[Garri83]

А можно сделать, что бы не весь сайдбар плавал, а только последний виджет?

 

[MC_Mike]

Для просмотра этого контента нам потребуется ваше согласие на установку файлов cookie третьих лиц.
Более подробную информацию можно найти на нашей странице cookie.

Принимать файлы cookie третьих лиц

Искал такую реализацию.
Нашел здесь

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Пытаюсь прикрутить к XenForo, но пока увы мало успехов

 

[HAIM]

Для просмотра этого контента нам потребуется ваше согласие на установку файлов cookie третьих лиц.
Более подробную информацию можно найти на нашей странице cookie.

Принимать файлы cookie третьих лиц

Искал такую реализацию.
Нашел здесь

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Пытаюсь прикрутить к XenForo, но пока увы мало успехов

Ну вот я за десять минут набросал такое грубое решение, можете с него начать. Хз что там сложного, если честно :)

 

[MC_Mike]

Спойлер: решение получилось не идеальным, во многом из-за того, что я получал ошибку в консоли Uncaught SyntaxError: Unexpected token export

Как раз таки это и представляло сложность

 

[-OZ-]

А чем не устраивает решение на CSS?

 

[MC_Mike]

А чем не устраивает решение на CSS?

Тем, что если сайдбар длинный и не умещается в экран, нужно пролистать страницу до конца вниз, чтобы увидеть все содержимое сайдбара. Просто посмотрите видео в предыдущем посте, там все визуально показано

 

[Mirovinger]

Тогда открою Вам секрет, я пока не видел под ксен нормального исполнения, даже в каком-то из стилей, а сайдбар к тому же не должен быть такой громоздкий, что листать прямо не перелистать, плавающий он как раз и предназначен когда контента по минимуму, в противном случае это просто не имеет смысла.

 

[MC_Mike]

даже в каком-то из стилей

В стилях от TH такой имеется если я не ошибаюсь

Тогда открою Вам секрет, я пока не видел под ксен нормального исполнения

Ключевое слово "нормального", нет, этот секрет мы знаем?

а сайдбар к тому же не должен быть такой громоздкий, что листать прямо не перелистать

Ну как сказать, спорный вопрос, конечно он не должен быть громоздким, но иногда может быть так, что полезная информация в сайдбаре, скажем, на странице просмотра темы чуть больше, и так как экраны девайсов бывают разные, часть информации может не уместиться в экран, что придется пролистать страницу до конца вниз

плавающий он как раз и предназначен когда контента по минимуму, в противном случае это просто не имеет смысла.

Согласен с вами, но вопрос спорный, на вкус и цвет.

Но пока что единственное нормальное решение это способ через less, которым остаётся довольствоваться. Наиогромнейший плюс его в простоте и в том, что ничего не лагает.

 

[hurtman]

на 2.2 основной контейнер съезжает.

 

[Parlevsky]

А можно как то исключить некоторые страницы, чтобы на них он не был плавающим?

 

[Mirovinger]

Можно, зависит от страниц, ну и да, нужно будет по 2.2 посмотреть, как-то не до этого было.

 

[inz]

на 2.2 основной контейнер съезжает.

Посмотреть вложение 120732

Чуть подправил, теперь работает на 2.2, но это чуть костыльный вариант, возможно Mirovinger подправит по нормальному когда у него будет время. В этом коде так-же есть поддержка sideNav'a.

@fox-sticky-top: 48px;

@media (min-width: (@xf-responsiveWide + 1px)) {
    .p-body-main--withSidebar {
        display: flex;
        align-items: flex-start;

        .p-body-content {
            flex: 1 1 auto;
            display: block;
            width: ~"calc(100% - @xf-sidebarWidth)";
        }

        .p-body-sideNav,
        .p-body-sidebar {
            flex: 0 0 auto;
            display: block;
        }

        @supports ((position: sticky) or (position: -webkit-sticky)){
            .p-body-sideNav, .p-body-sidebar {
                position: -webkit-sticky;
                position: sticky;
                top: 10px;
                & when (@xf-publicNavSticky = primary) or (@xf-publicNavSticky = all) {
                    top: @fox-sticky-top * 1px + 10px;
                }
            }
        }
    }
}

.p-body-sideNavCol, .p-body-sidebarCol
{
    width: 0px;
}

 

[TestingPage]

Чуть подправил, теперь работает на 2.2, но это чуть костыльный вариант, возможно Mirovinger подправит по нормальному когда у него будет время. В этом коде так-же есть поддержка sideNav'a.

@fox-sticky-top: 48px;

@media (min-width: (@xf-responsiveWide + 1px)) {
    .p-body-main--withSidebar {
        display: flex;
        align-items: flex-start;

        .p-body-content {
            flex: 1 1 auto;
            display: block;
            width: ~"calc(100% - @xf-sidebarWidth)";
        }

        .p-body-sideNav,
        .p-body-sidebar {
            flex: 0 0 auto;
            display: block;
        }

        @supports ((position: sticky) or (position: -webkit-sticky)){
            .p-body-sideNav, .p-body-sidebar {
                position: -webkit-sticky;
                position: sticky;
                top: 10px;
                & when (@xf-publicNavSticky = primary) or (@xf-publicNavSticky = all) {
                    top: @fox-sticky-top * 1px + 10px;
                }
            }
        }
    }
}

.p-body-sideNavCol, .p-body-sidebarCol
{
    width: 0px;
}

При этой реализации главная страница плагина Ресурсы крашится по верстке. Необходимо править код

 

[IshidaRex]

При этой реализации главная страница плагина Ресурсы крашится по верстке. Необходимо править код

Ошибки какие пишет

 

[DimmmCom]

@media (min-width: (@xf-responsiveWide)) {
    .p-body-main--withSidebar, .p-body-main--withSideNav {       
        @supports ((position: sticky) or (position: -webkit-sticky)){
            .p-body-sidebar, .p-body-sideNav {
                display: inline-block;
                position: -webkit-sticky;
                position: sticky;
                top: 5px;
                & when (@xf-publicNavSticky = primary) or (@xf-publicNavSticky = all) {
                    top: 55px;
                }
            }
        }
    }
}