XF 2.0 Sticky sidebar

[Kleazy]

Trying to make the sidebar sticky so when scrolling vertically the sidebar never shows emptiness.
There used to be a plugin or two that are no more... and I see it as a feature in a few of the styles for sale in the resource section.

Can someone help me turning my current (close to default) style into a sticky sidebar?

 

[3rd AnGle]

Trying to make the sidebar sticky so when scrolling vertically the sidebar never shows emptiness.
There used to be a plugin or two that are no more... and I see it as a feature in a few of the styles for sale in the resource section.

Can someone help me turning my current (close to default) style into a sticky sidebar?

i am also looking for this solution. Can someone help?

If XF makes all its widget configurable for stickiness it'd be awesome.

 

[Flagy_]

If I understood what you meant, go to

Appearance -> Styles -> Your style - proprieties -> Sidebar -> Sticky Sidebar (check box)

 

[Kleazy]

If I understood what you meant, go to

Appearance -> Styles -> Your style - proprieties -> Sidebar -> Sticky Sidebar (check box)

Thanks for the help...but the default style that ships with my xf does not have "sidebar" as an option inside the style properties.... maybe thats a function of some custom themes?

 

[DohTheme]

Thanks for the help...but the default style that ships with my xf does not have "sidebar" as an option inside the style properties.... maybe thats a function of some custom themes?

Yes that’s right

 

[Nirjonadda]

Can be done with CSS?

 

[DohTheme]

Can be done with CSS?

Yes

 

[Nirjonadda]

Yes

So Please reply me the CSS code for adding in extra.less.

 

[DohTheme]

So Please reply me the CSS code for adding in extra.less.

Sorry this is an option in premium themes only

 

[Emre]

Add extra.less;

.p-body-sidebar {display: table-cell !important}

Open the template to constrain the widget Add id = "name" or class = "name" to the first div
Open the helper_js_global template and end the js template </ xf: macro>

<script>if ($(window).width() > 768) {
$('.p-body-sidebar #name').stick_in_parent({parent: '.p-body-main', spacer: '.p-body-sidebar', offset_top: 60});
}</script>

Note: The offset_top can be customized to match the tempo.

 

[3rd AnGle]

Open the template to constrain the widget Add id = "name" or class = "name" to the first div

Which template?

 

[Emre]

PAGE_CONTAINER search in template

            <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>
            </xf:if>

change

            <xf:if is="$sidebar">
                <div class="p-body-sidebar">
                <div id="sidebar">
                    <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>

search;

    <xf:include template="google_analytics" />

change

    <xf:js src="js/xFDestek/SabitSidebar/jquery.lockfixed.js" />
    <xf:js src="js/xFDestek/SabitSidebar/jquery.lockfixed.min.js" />

helper_js_global search in template

        </script>
    </xf:if>
</xf:macro>

change;

        </script>
    </xf:if>
<script>
    if ($(window).width() > 768) {
        $(document).ready(function () {
             $.lockfixed("#sidebar", {offset: {top: {$xf.options.sticky_sidebar_offset_top}, bottom: {$xf.options.sticky_sidebar_offset_bottom}} });
});
    }
</script>
</xf:macro>

Upload zip file in the forum ftp main directory
Good work!

Demo; https://xfdestek.com

 

[Nicolas FR]

Hello,

Doesn't work for me, the footer comes like the sidebar...

What's wrong ?

 

[Nicolas FR]

Sorry this is an option in premium themes only

Hello, is only this option can be purchased ?

 

[DohTheme]

Hello, is only this option can be purchased ?

Yes start a conversation with me