How to highlight a TOC-Headline? Using GeneratePress Elements
-
Hello,
I have applied SimpleTOC to the left sidebar as a sticky element via the GeneratePress Themes Elements feature, and so far it works fine.
I guess it will work with any other theme that allows you to hook content to the sidebar. Using the default widget did not work properly in my testing.
However, now I’d like to highlight a toc-headline whenever the corresponding headline of the content reaches the top 200px area of the viewport.
I guess this will require some JS, which unfortunately I’m not familiar with. So I wonder if anyone in this forum can help with this?
Kind regards
Sascha
-
Update: created a new topic since this one is already marked as completed: https://wordpress.org/support/topic/highlight-active-toc-headline/
Hey guys,
I’m looking for the same solution, so does the author or anyone else know how this can be achieved? I tried asking ChatGPT that spit out the JS code below, which didn’t work out of the box. I also tried changing the class selector and a few other things.
Would be really great to find a way to solve this since I’m sure many people would like to implement the same to their site!
my-toc-highlight.js
document.addEventListener('DOMContentLoaded', function() { var tocLinks = document.querySelectorAll('.simple-toc a'); var sectionIds = Array.from(tocLinks).map(a => a.hash); window.onscroll = function() { var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; sectionIds.map(function(id) { var section = document.querySelector(id); if (section.offsetTop <= scrollPosition && section.offsetTop + section.offsetHeight > scrollPosition) { document.querySelector('.simple-toc a[href="' + id + '"]').style.color = '#f00'; // Change color to red when active } else { document.querySelector('.simple-toc a[href="' + id + '"]').style.color = ''; // Reset color when not active } }); }; });functions.php
function my_theme_scripts() { wp_enqueue_script('my-toc-highlight', get_template_directory_uri() . '/js/my-toc-highlight.js', [], '1.0', true); } add_action('wp_enqueue_scripts', 'my_theme_scripts');PS: this is the exact code from ChatGPT and I know that the class selector is not the correct one (I tried changing that!)
- The topic ‘How to highlight a TOC-Headline? Using GeneratePress Elements’ is closed to new replies.
