Archived topic

Sticky left-sidebar

5 replies · Started by An Nguyen on October 11, 2019

Viewing posts 1–6 of 6

October 11, 2019 at 10:47 am #1032276

Hi All,

I used this code for sticky right-sidebar. It's worked perfect!

body.single-post #right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;}

However, I want a sticky left-sidebar also but it failed and you can see the attached link.

Thanks

October 11, 2019 at 8:16 pm #1032506

Hi there,

Looks like position: sticky is having a hard time with how the left sidebar is placed.

Have you tried a plugin like this?: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

October 12, 2019 at 5:19 am #1032631

Hi Tom,

I prefer pure CSS rather than using plugin with script. I’ve limited to use plugins on my site. Anyway, thanks Tom for the suggestion. I decide to implement one of two methods below:

+I used "transform:translatex()" to reposition the left-side-bar in the first way. It's very simple because I inserted TOC as a widget. I'm not sure I did the right way in term of ‘responsive’. What's do you think?

+Another way is that I wanna insert the TOC inside the left-sidebar using hook with a div with class "floating container" which contains [TOC-shortcode] to control the sticky TOC. Will I use the hook "before-content-left-sidebar"?

My code that I want to insert is <div class=“floating-container”> [TOC-shortcode] </div>

The HTML mark-up is:

<div class="inside-left-sidebar">
         insert my code here
<aside id.....></aside>

October 12, 2019 at 8:13 pm #1033217

That looks like a good solution :)

The hook you want to use is: generate_before_left_sidebar_content

October 13, 2019 at 11:03 am #1033638

Thanks Tom

October 13, 2019 at 8:24 pm #1033862

No problem :)

This archived topic is closed to new replies.

Start building better websites today.