Is this possible with the sidebar?

[damian]

Hi,

Is there any plugin or code that would enable me to make a sidebar ‘stick’ at some point during page scrolling, and then ‘unstick’ when the footer comes up?

Here’s an example of this happening on a different site …
http://www.kayture.com/

I’d love to add this feature to my Swagger websites.

Thanks,
Damian

Topic

[Jason Bobich]

Hello Damian,

I apologize, but there is no feature in the theme for this, and would be a pretty significant customization you’d need to make to the theme. Unfortunately, this is pretty far outside of the realm of support. If you google “sticky sidebar” you’ll find tons of ways you could theoretically do it, but it’s going to probably take basic child theme, HTML, CSS, and javascript skills to make something like that happen.

[Jason Bobich]

With that said, I’m going to copy this, which I posted previously in the Jump Start forum, that maybe you can take a stab at doing in Swagger. In theory, it should work the same.

http://support.themeblvd.com/forums/topic/floating-sidebar/

=========

Hello,

Bootstrap (a frontend framework contained in your theme) actually has something called “Affix” you can use here. Checkout the docs here:

http://getbootstrap.com/javascript/#affix

Hopefully this will get you started on this.

In your child theme’s functions.php, you can wrap your sidebar in the HTML markup that Bootstrap docs cite, using a couple of our action hooks before and after sidebars:

function my_affix_top() {
	echo '<div data-spy="affix" data-offset-top="200" class="affix-sidebar">';
}
add_action( 'themeblvd_fixed_sidebar_before', 'my_affix_top', 11 );

function my_affix_bottom() {
	echo '</div><!-- .affix (end) -->';
}
add_action( 'themeblvd_fixed_sidebar_after', 'my_affix_bottom', 9 );

And then in your CSS, style what happens when Bootstrap adds the “affix” class when scrolling down:

.affix-sidebar.affix {
	position: fixed;
	top: 10px;
	width: 310px;
}

[Author]

Replies