Плавающий боковой блок в Invision Community (липкий, скользящий, скролл...)

[desart]

Давно искал, а оказывается эта функция есть в самом Invision...

Блок для правой колонки, прокручивается вместе со страницей... Типа когда много текста/контента... Вставляете в рекламу или сразу в блок через HTML...

<div class="ipsWidget" data-ipssticky data-ipssticky-relativeto="#ipsLayout_sidebar">
ВАШ КОД
</div>

*В инете есть старый код (2017год)(не проверял):

<div data-ipsSticky data-ipsSticky-relativeTo='#ipsLayout_sidebar' data-ipsSticky-disableIn='tablet,phone'>
  Плавающий блок
</div>

Типа в нём отключена функция для мобилы...

***ВАЖНО! Блок должен быть - ПОСЛЕДНИМ!

*для "ПО ЦЕНТРУ" вдруг узкое вставите )))

<div class="ipsWidget" align="center" data-ipssticky data-ipssticky-relativeto="#ipsLayout_sidebar">

Изменено 2 декабря, 2022 пользователем desart

[desart]

Подскажите по отступу СВЕРХУ

т.к. у нас ширина правой колонки 320, а вставляться будет 300, то хочется сделать отступ сверху в 10px (типа везде одинаково)

вставляю margin-top на 10 и ничего.. ((

я полюбому что-то делаю не так...

<div class="ipsWidget" align="center" ???????? data-ipssticky data-ipssticky-relativeto="#ipsLayout_sidebar">

Изменено 2 декабря, 2022 пользователем desart

[Donjuan]

27 минут назад, desart сказал:

Подскажите по отступу СВЕРХУ

Я через код элемента делаю всегда и потом уже в скрипт вставляю, или куда там нужно..

Изменено 2 декабря, 2022 пользователем Donjuan

[Exception]

45 минут назад, desart сказал:

Подскажите по отступу СВЕРХУ

т.к. у нас ширина правой колонки 320, а вставляться будет 300, то хочется сделать отступ сверху в 10px (типа везде одинаково)

вставляю margin-top на 10 и ничего.. ((

я полюбому что-то делаю не так...

<div class="ipsWidget" align="center" ???????? data-ipssticky data-ipssticky-relativeto="#ipsLayout_sidebar">

https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuisticky-r62/
опция spacing

data-ipsSticky-spacing="10"

 

[desart]

26 минут назад, Exception сказал:

data-ipsSticky-spacing="10"

Привет! Я немного другое имел ввиду... Это ты написал отступ от верхнего края окна во время прокрутки...

А я спрашивал про сам блок.

для примера вставил карту... слева и справа отступы по 10, а сверху = 0

вот сам код:

<div class = "ipsWidget" align = "center" data-ipsSticky-spacing="5" data-ipssticky data-ipssticky-relativeto = "#ipsLayout_sidebar" >   
<iframe src="https://yandex.ru/map-widget/v1/-/*******" width="300" height="500" frameborder="0" allowfullscreen="true" style="position:relative;"></iframe>
</div>

*** в сам iframe попробовал... margin-top="10" - не помогло

Изменено 2 декабря, 2022 пользователем desart

[Exception]

6 минут назад, desart сказал:

*** в сам iframe попробовал... margin-top="10" - не помогло

в html нет такого атрибута, он в css

margin-top: 10px;

или внутренний отступ

padding-top: 10px;

 

[desart]

8 минут назад, Exception сказал:

в html нет такого атрибута, он в css

Мой мозг этого не знал )))

Спасибо! Всё получилось:  ........width="300" height="500" frameborder="0" allowfullscreen="true" style="position:relative; margin-top: 10px;"></iframe>