I am looking for an answer or workaround to this problem.

I found a Table of Contents plugin for Blogger, which could create an automatic ToC, using Javascript-HTML-and-CSS, by this author (Code from original creator). In his blog, it worked correctly, when I clicked any headings in the ToC, it return to the exact position. Mine does worked too, but as it's a different theme, this exact position is always under my sticky header (Problem on my website).

So the question is, how to make it possible, if I click certain heading in the ToC, it will show up like 50 or 100 px below the sticky header? I have looking for various solution, like jumplist, scroll-to-an-element-with-jquery, but it doesn't seem to work...

Thank you, and I hope my explanation above is clear enough...

Edit: To provide more context, here is a video of my problem: Video recording. First one is the original creator, and the second one is my current site.

Here is the original code that from his blog, and I used it too on my website:

<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin by MyBloggerTricks.com           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>