Is this possible with the sidebar?
-
Topic
-
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The forum ‘Swagger Responsive WordPress Theme’ is closed to new topics and replies.
This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.
Tagged: sidebar
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
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.
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; }