sticky sidebar

[Drewfus]

I am going crazy trying to make a sticky sidebar on my default theme in my custom css and just can't seem to figure it out any help would be appreciated.

[Randy Calvert]

It’s built into the core CSS already. Just wrap the sidebar code with:

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

</div>

[Drewfus]

not sure what you mean and where to wrap it at.

{{$adsForceSidebar = ( \IPS\Settings::i()->ads_force_sidebar AND \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) );}}
{{if (isset( \IPS\Output::i()->sidebar['enabled'] ) and \IPS\Output::i()->sidebar['enabled'] ) && ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) || ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) || ( \IPS\Dispatcher::i()->application instanceof \IPS\Application AND \IPS\Dispatcher::i()->application->canManageWidgets() ) || $adsForceSidebar )}}
	<div id='ipsLayout_sidebar' class='ipsLayout_sidebar{$position} {{if !( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) && ( !isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) || !\count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) && \IPS\Dispatcher::i()->application->canManageWidgets() && !$adsForceSidebar}}ipsLayout_sidebarUnused{{endif}}' data-controller='core.front.widgets.sidebar'>
		{{if $announcements = \IPS\core\Announcements\Announcement::loadAllByLocation( 'sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) )}}
			{template="announcementSidebar" group="global" app="core" params="$announcements"}
		{{endif}}
		{{if isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== ''}}
			<aside id="elContextualTools" class='ipsClearfix' {{if isset( \IPS\Output::i()->sidebar['sticky'] )}}data-ipsSticky{{endif}}>
				{expression="\IPS\Output::i()->sidebar['contextual']" raw="true"}
			</aside>
			<hr class='ipsHr ipsSpacer_both'>
		{{endif}}
		{{if $adsForceSidebar OR ( \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) ) )}}
			<div data-role='sidebarAd'>
				{advertisement="ad_sidebar"}
			</div>
			<br><br>
		{{endif}}
      {template="widgetContainer" group="global" app="core" params="'sidebar', 'vertical'"}    
		
{{endif}}

 

[Nathan Explosion]

Add this:

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

 

before this:

<div id='ipsLayout_sidebar'...

And this:

</div>

After wherever your closing </div> is (I don't see it in your code there)

Edited February 16, 2023 by Nathan Explosion

[Drewfus]

that code puts my sidebar at the bottom of my forums.

[Nathan Explosion]

Just now, Drewfus said:

that code puts my sidebar at the bottom of my forums.

Refresh what I posted - I changed it because you are missing a </div> in your original code.

[WP V0RT3X]

https://invisionfocus.de/files/file/36-sticky-sidebar/