Contents bar on the right hand side doesn't scroll down

[linkarzu]

Checklist

• [X] I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Describe the bug

I have this blogpost that has a lot of markdown headings, but as you can see on the image below, if I keep scrolling down on the document, the "Contents" section doesn't keep going down, you can see this behaviour on the video below.

Any help would be appreciated!

And by the way, lovely and wonderful theme, I really love it so much, thanks for all the hard work put into it.

https://sharing.linkarzu.com/TbsvzhJpbz0nPQ05Hsg9

Steps To Reproduce

This can be seen in the video

https://sharing.linkarzu.com/TbsvzhJpbz0nPQ05Hsg9

Expected Behavior

The "Contents" section should keep scrolling down as markdown headings scroll down

Environment

❯ ruby -v ruby 3.1.3p185 (2022-11-24 revision 1a6b16756e) [arm64-darwin23]

❯ bundle exec jekyll -v jekyll 4.3.3

❯ bundle info jekyll-theme-chirpy

• jekyll-theme-chirpy (7.0.1) Summary: A minimal, responsive, and feature-rich Jekyll theme for technical writing. Homepage: https://github.com/cotes2020/jekyll-theme-chirpy Documentation: https://github.com/cotes2020/jekyll-theme-chirpy/#readme Source Code: https://github.com/cotes2020/jekyll-theme-chirpy Wiki: https://github.com/cotes2020/jekyll-theme-chirpy/wiki Bug Tracker: https://github.com/cotes2020/jekyll-theme-chirpy/issues Path: /Users/linkarzu/.gem/ruby/3.1.3/gems/jekyll-theme-chirpy-7.0.1

Anything else?

No response

[cotes2020]

Thank you for reaching out, someone raised this issue years ago, so it seems necessary to improve the table of contents.

---

Update: It should be this one:

• #321

[linkarzu]

It would be much appreciated, again, thank you very much!

[minyez]

Hi,

In this issue of tocbot, the author of tocbot gives some hints about making the TOC scrollable. To use it in chirpy, I added the following code to assets/css/jekyll-theme-chirpy.scss

#toc-wrapper {
  overflow-y: scroll;
  height: 75vh;

  /* make the marker of active section visible*/
  ul {
    .is-active-link {
      &::before {
        left: 0px;
      }
    }
  }
}

However, this has a caveat (apart from a slight change in the appearance of the active section marker): if you scroll the body text across headings at the same level, the TOC would not scroll itself accordingly. One can also use selector #toc instead of #toc-wrapper, which solves this issue, but it will mess up the active section marker when you scroll the TOC backwards.

I have no training in web programming so this is after all a hacky workaround. I'm sharing it in hope that someone may come up with a better idea.