Selected TOC element scrolls under fixed header about tocbot HOT 10 CLOSED

Another solution that worked for me is to set a same size top padding for the heading as your header height andc also a negative top margin for the heading. E.g.:

h1 {
   padding-top: 60px; /* Size of your fixed header */
   margin-top: -60px; /* If you need more spacing between the heading and the preceding element then fine tune this value */
}

from tocbot.

Thanks for using tocbot. I just updated the readme to explain how to handle fixed headers better. https://github.com/tscanlin/tocbot#fixed-headers

Basically, use CSS similar to the following:

h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    display: block;
    content: " ";
    height: 60px;
    margin-top: -60px;
    visibility: hidden;
}

Let me know how that works for you.

from tocbot.

Thanks! This works great except in the case where your header just has a background color. Then you get to see that extra height covering some of your pre-header content with that background color. Oddly, you can fix it by also giving the header a border. This may just be a quirk of bootstrap.

Here's a contrived example that demonstrates what I'm seeing in my site:

<div class="blue-box">
    <pre>Content before header</pre>
    <h2 style="max-width: 200px; background-color: rgba(255, 73, 73, 0.5);">Header!</h2>
    <pre>Content after header</pre>    
</div>

from tocbot.

Oh, you can also try adding overflow: hidden to the header tag to hide the pseudo element from doing that. Hopefully it helps.

from tocbot.

I'm gonna close this but feel free to comment if you run into any other issues.

from tocbot.

Thanks for the help!

On a somewhat unrelated note, you might also want to document how to disable the smooth scrolling for specific links. I was getting unwanted automatic scrolling behavior from ZenScroll when using Bootstrap Collapse to expand/collapse elements.

from tocbot.

Thanks for the tip, that is good to note. I've updated the readme

from tocbot.

Good to know @peterzimon thank you for sharing!

from tocbot.

Thanks for using tocbot. I just updated the readme to explain how to handle fixed headers better. tscanlin/tocbot#fixed-headers

Basically, use CSS similar to the following:

h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    display: block;
    content: " ";
    height: 60px;
    margin-top: -60px;
    visibility: hidden;
}

Let me know how that works for you.

Do you have to set headingSelector: 'h2::before, h3::before, h4::before' for this to work? I tried that and it says Element not found: .post-content where .post-content is my contentSelector.

If I remove the ::before tags then nothing happens and it still scrolls to the top.

Thanks for your help!

from tocbot.

Let's make a new issue so we don't spam people who started this thread over a year ago ;)

from tocbot.