{"id":2250,"date":"2023-01-11T10:38:06","date_gmt":"2023-01-11T10:38:06","guid":{"rendered":"https:\/\/tocwp.com\/docs\/?post_type=ht_kb&#038;p=2250"},"modified":"2025-11-28T07:53:38","modified_gmt":"2025-11-28T07:53:38","slug":"how-to-add-a-sticky-easy-table-of-contents-in-the-sidebar","status":"publish","type":"ht_kb","link":"https:\/\/tocwp.com\/docs\/knowledge-base\/how-to-add-a-sticky-easy-table-of-contents-in-the-sidebar\/","title":{"rendered":"How to add a Sticky Easy Table Of Contents in the Sidebar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this tutorial, we will show you how you can add a Sticky Table Of Contents in the Sidebar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1:<\/strong> Go to Appearance &gt; Widget &gt; here you will find the Sidebar section of your theme<strong>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1024x449.png\" alt=\"\" class=\"wp-image-2273\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1024x449.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-300x132.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-768x337.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-50x22.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-60x26.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-100x44.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot.png 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2:<\/strong> Click on the \u201c+\u201d icon to add the <strong>Sticky Sidebar Table Of Contents<\/strong> block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1-1024x453.png\" alt=\"\" class=\"wp-image-2276\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1-1024x453.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1-300x133.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1-768x340.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1-50x22.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1-60x27.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1-100x44.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-1.png 1346w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3: <\/strong>After adding the block, you can see an option called <strong>Advance Settings<\/strong>, by enabling this option you can customize the <strong>Scroll Fixed Position<\/strong>, <strong>Fixed Top Position<\/strong>, <strong>Scroll Max Height<\/strong>, and <strong>Sidebar Width<\/strong> according to your need.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2-1024x453.png\" alt=\"\" class=\"wp-image-2279\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2-1024x453.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2-300x133.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2-768x340.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2-50x22.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2-60x27.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2-100x44.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-2.png 1348w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4: <\/strong>Now click on the update and that&#8217;s it, the Sticky Table of Contents will start to appear on your post\/pages<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3-1024x533.png\" alt=\"\" class=\"wp-image-2280\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3-1024x533.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3-300x156.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3-768x400.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3-50x26.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3-60x31.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3-100x52.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screenshot-3.png 1201w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Output: <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"728\" style=\"aspect-ratio: 1366 \/ 728;\" width=\"1366\" controls src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2023\/01\/Screencast-2023-01-11-17-03-47.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note: <\/strong>Highlighting of the headings will depend on the Theme which you are using on your end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We hope we\u2019ve cleared your doubts in case you have any feedback or questions, then please share them in the comments section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will show you how you can add a Sticky Table Of Contents in the Sidebar. Step 1: Go to Appearance &gt; Widget &gt; here you will find the Sidebar section of your theme. Step 2: Click on the \u201c+\u201d icon to add the Sticky Sidebar Table&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[4],"ht-kb-tag":[],"class_list":["post-2250","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-how-to"],"_links":{"self":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/2250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/comments?post=2250"}],"version-history":[{"count":14,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/2250\/revisions"}],"predecessor-version":[{"id":2631,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/2250\/revisions\/2631"}],"wp:attachment":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/media?parent=2250"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=2250"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=2250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}