XF 2.1 Theia Sticky Sidebar - прилипание сайдбара при прокрутке страницы

[MC_Mike]

Делаю по этому мануалу

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

Добавляю в PAGE_CONTAINER перед </body> через tms:

<script type="text/jаvascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/jаvascript" src="js/stickySidebar/ResizeSensor.min.js"></script>
<script type="text/jаvascript" src="js/stickySidebar/theia-sticky-sidebar.min.js"></script>
<script type="text/jаvascript">
  jQuery(document).ready(function() {
    jQuery('.p-body-content, .p-body-sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30,
      containerSelector: '.p-body-main--withSidebar'
    });
  });
</script>
$0

В PAGE_CONTAINER содержимое класса <div class="p-body-content"> и <div class="p-body-sidebar"> оборачиваю в <div class="theiaStickySidebar">, то есть так:

<div class="p-body-content">
                <div class="theiaStickySidebar">
                    <xf:ad position="container_content_above" />
                    <div class="p-body-pageContent">{$content|raw}</div>
                    <xf:ad position="container_content_below" />
                </div>
            </div>

            <xf:if is="$sidebar">
                <div class="p-body-sidebar">
                    <div class="theiaStickySidebar">
                        <xf:ad position="container_sidebar_above" />
                        <xf:foreach loop="$sidebar" value="$sidebarHtml">
                            {$sidebarHtml}
                        </xf:foreach>
                        <xf:ad position="container_sidebar_below" />
                    </div>
                </div>
            </xf:if>

у меня не срабатывает, в чем может быть проблема?

 

[Skaiman]

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

у меня не срабатывает, в чем может быть проблема?

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

 

[MC_Mike]

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

Я постарался сделать это сам, не получилось, написал сюда в надежде, что подскажут, а не сразу пришел с вопросом. Где старания? Воон старания! Как же вам доставляет удовольствия поглумиться то, а?

Вы прислали ссылку на плагин, но их фнкции несколько отличаются, посмотрите пожалуйста на демо

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

Еще пример

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

 

[BIOMOND]

Я постарался сделать это сам

Где старания? Воон старания!

Благодарим Вас, сударь. *низкий поклон* ?

 

[MC_Mike]

Благодарим Вас, сударь. *низкий поклон*

Не нужно было мне обращаться в поддержку?

 

[Matew]

Я постарался сделать это сам, не получилось, написал сюда в надежде, что подскажут, а не сразу пришел с вопросом. Где старания? Воон старания! Как же вам доставляет удовольствия поглумиться то, а?

Вы прислали ссылку на плагин, но их фнкции несколько отличаются, посмотрите пожалуйста на демо

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

Еще пример

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

Над вами никто не глумится. Вы просто что-то скачали, вставили какой-то код и пишите что ничего не работает. Здесь всё таки не форум "сделаем всё за вас", а форум с поддержкой движка. Конкретно ваш вопрос даже никоим образом к технической поддержке не относится, здесь нужно сесть и разбираться со сторонним скриптом, который вы пытаетесь интегрировать. Значит, раз вы пытаетесь сами, у вас должны быть хоть какие-то базовые знания.

Не нужно было мне обращаться в поддержку?

Повторю ещё раз, но поддержка движка, это не поддержка сторонних сервисов. А начать можно было бы хоть с проверки консоли браузера на ошибки, и поинспектировать код

 

[MC_Mike]

Matew, в консоли чисто. Ладно, понял вас, спасибо. Попробую разобраться где что не так. Если найду, обязательно отпишусь

 

[Matew]

Вы прислали ссылку на плагин, но их фнкции несколько отличаются, посмотрите пожалуйста на демо

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

Еще пример

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

Вот я посмотрел и ничего не увидел кроме того, что кусок сайдбара у них при скроллинге обрезается, что для меня выглядит убого. Если у вас есть какие-то особые требования, вы можете описать их. Вы можете написать, чем КОНКРЕТНО плагин выше вас не устраивает, возможно это решается щелчком настроек или минимальной модификацией

 

[MC_Mike]

Matew, в плагине [cXF] Sticky Sidebar просто фиксируется к верхней части, в Theia Sticky Sidebar при прокрутке страницы сайдбар не прикрепится, пока не покажется его (сайдбара) конец, при прокрутке страницы вверх сайдбар также не прикрепится кверху, пока не покажется его начало, другими словами, при прокрутке страницы сайдбар виден целиком, а в плагине [cXF] Sticky Sidebar нужно страницу докрутить до конца вниз, чтобы показалась часть сайдбара, которая не поместилась в экран

Gif

 

[HAIM]

MC_Mike, попробуйте это, на момент написания всё работало как надо

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

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

 

[rozhur]

В движке есть встроенный "sticky-kit". Здесь можно узнать, как пользоваться

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

.
Этот скрипт используется в админке, если вы могли заметить, что левая навигация прилипает при прокрутке.

Также, можно посмотреть принцип реализации у uix стилей через этот же скрипт.

Спойлер

 

[West14]

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

.

OFFTOP

То чувство, когда разраб либы зафейлил на своём же сайте.

 

[Captain]

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

То чувство когда разработчики сами её используют и фиксят

 

[MC_Mike]

Добавляем 2 модификации:

Шаблон: PAGE_CONTAINER
Найти: </body>
Заменить:

<xf:js src="theiaStickySidebar/ResizeSensor.js" />
<xf:js src="theiaStickySidebar/theia-sticky-sidebar.js" />
<xf:js>
    $(document).ready(function() {
        $('.p-body-content, .p-body-sidebar')
            .theiaStickySidebar({
                additionalMarginTop: 50,
                  containerSelector: '.p-body-main--withSidebar',
                minWidth: '955px'
            });
    });
</xf:js>
$0

Шаблон: PAGE_CONTAINER
Найти:

<div class="p-body-content">
                <xf:ad position="container_content_above" />
                <div class="p-body-pageContent">{$content|raw}</div>
                <xf:ad position="container_content_below" />
            </div>

            <xf:if is="$sidebar">
                <div class="p-body-sidebar">
                    <xf:ad position="container_sidebar_above" />
                    <xf:foreach loop="$sidebar" value="$sidebarHtml">
                        {$sidebarHtml}
                    </xf:foreach>
                    <xf:ad position="container_sidebar_below" />
                </div>

Заменить:

<div class="p-body-content theiaStickySidebar">
                <xf:ad position="container_content_above" />
                <div class="p-body-pageContent">{$content|raw}</div>
                <xf:ad position="container_content_below" />
            </div>

            <xf:if is="$sidebar">
                <div class="p-body-sidebar theiaStickySidebar">
                    <xf:ad position="container_sidebar_above" />
                    <xf:foreach loop="$sidebar" value="$sidebarHtml">
                        {$sidebarHtml}
                    </xf:foreach>
                    <xf:ad position="container_sidebar_below" />
                </div>

Архив распаковываем в корень сайта

Как выглядит

[cXF] Sticky Sidebar

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

Theia Sticky Sidebar

Может кто то не видит в этом смысла, но так логичнее, все мы люди и все мы разные.

 

[rozhur]

<script>

<xf:js>