Adding sticky sidebar with TOC

Site URL: https://boo.world/enneagram-type-1-wing-9-1w9

Would love to know what we could implement to create a sticky sidebar so that they can navigate the article with a fixed table of contents on the left. 

You mean sticky left column text on scroll?

Add to Design > Custom CSS
 

@media screen and (min-width:768px) {
div#page-section-626c16ae7f4fd12766b4d43c .span-3 {
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
    z-index: 9999;
}}

On 5/5/2022 at 4:50 PM, tuanphan said:

You mean sticky left column text on scroll?

Add to Design > Custom CSS
 

@media screen and (min-width:768px) {
div#page-section-626c16ae7f4fd12766b4d43c .span-3 {
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
    z-index: 9999;
}}

 

Hi tuanphan thank you for the reply, unfortunately, we weren't able to test it out since we had to change the layout of the page. But currently here are sample pages that we need help with the code for a sticky column text (with button included) https://boo.world/infj-cognitive-functions and a similar page https://boo.world/enneagram-type-1-wing-9-1w9


Do you think that the same code can work for both?

19 hours ago, ljag said:

Hi tuanphan thank you for the reply, unfortunately, we weren't able to test it out since we had to change the layout of the page. But currently here are sample pages that we need help with the code for a sticky column text (with button included) https://boo.world/infj-cognitive-functions and a similar page https://boo.world/enneagram-type-1-wing-9-1w9


Do you think that the same code can work for both?

 

Use this CSS
 

/* Sticky text */
@media screen and (min-width:768px) {
div#page-section-627583e301dffa1a5bff3ac7>.row:nth-child(2) .span-2, div#page-section-626c16ae7f4fd12766b4d43c>.row>.span-2 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}}

On 5/24/2022 at 12:40 PM, tuanphan said:

Use this CSS
 

/* Sticky text */
@media screen and (min-width:768px) {
div#page-section-627583e301dffa1a5bff3ac7>.row:nth-child(2) .span-2, div#page-section-626c16ae7f4fd12766b4d43c>.row>.span-2 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}}

 

Hi @tuanphan this is great! This is a sample of an article that we used your code into: https://boo.world/i-hate-him-but-i-want-him-science-of-loving-someone-you-hate Thank you so much!

Is it possible to make the other side sticky too? (the author part) anyway the important thing is that the table of contents are now visible.

On 5/24/2022 at 12:40 PM, tuanphan said:

Use this CSS
 

/* Sticky text */
@media screen and (min-width:768px) {
div#page-section-627583e301dffa1a5bff3ac7>.row:nth-child(2) .span-2, div#page-section-626c16ae7f4fd12766b4d43c>.row>.span-2 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}}

 

Hi @tuanphan! You were a great help thank you! Last question can we implement the sticky sidebar (on the left) to implement the sticky to our blog pages? Like this one: https://boo.world/blog/attraction-to-people-who-smell-good

On 7/3/2022 at 3:15 PM, ljag said:

Hi @tuanphan! You were a great help thank you! Last question can we implement the sticky sidebar (on the left) to implement the sticky to our blog pages? Like this one: https://boo.world/blog/attraction-to-people-who-smell-good

 

Try this code

@media screen and (min-width:768px) {
.blog-item-wrapper .blog-item-content .span-2 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}