search

toshimaru / jekyll-toc

Jekyll plugin which generates a table of contents.
MIT License
340 stars 52 forks source link

Option to move id to injected anchor #89

Closed cmann1 closed 5 years ago

cmann1 commented 5 years ago

So I'm trying to fix an issue where sticky headers overlap/cover headings when navigating using the ToC. Would an option, when using the inject_anchors option, to move the id from the containing header into the injected anchor be possible?

toshimaru commented 5 years ago

I'm not going to support that feature.

Please fix the issue with CSS. This is a sample:

image

ref. https://railsdoc.github.io/#label-Welcome+to+Rails

cmann1 commented 5 years ago

This isn't always a viable option. You need to approximate the height of your sticky header, so you can manually set the height and margin for the :before pseudo element, which in my opinion doesn't seem ideal. Another option is to using padding and a negative margin on the header itself.

Problem is both these solutions can clash with existing css/markup, as they do in my case. And for some reason, I haven't been able to get this to work with pseudo elements, even if I copy straight from the sample you posted.

cmann1 commented 5 years ago

So eventually found why :before isn't working: https://stackoverflow.com/a/17303334/153844 See the second comment for that answer. This technique doesn't work if the header has padding or border, which is kind of problematic.

I mean you could work around this with extra markup, but if I have to add mark up I'd rather just use the more straight forward way of using an anchor, instead adding other necessary elements to fix browser quirks.

cmann1 commented 5 years ago

Thinking about it, another option might be instead a config value to provide your own selector for which elements are used to build the ToC. eg. I could set the option to h1.anchor > a if I wanted to add my own a tags inside of headers to be used as anchors.