The wrong list Item is marked as active

[RedEagle-dh]

Description

Maybe I did not use the library correctly. but in my case the wrong list item is marked as active. As you will see in the screenshots, I am currently at "security updates", but "bug fixes" is active. Thats not the only case, it happens almost everywhere.

I've added a topOffset of 80, because I have a sticky navbar.

The data I've provided in the code is just some dummy data, but later it will be filled like that.

Expected behavior

The topmost list item should always be marked as active, even with offset.

Screenshots

Environment Information

• Using React, Next.js 14, Node 18, Typescript / TSX, Tailwindcss, Shadcn
• OS: Windows 11 Pro 23H2 22631.3447
• Browser: Brave
• Version: Version 1.65.114 Chromium: 124.0.6367.60

Code

'use client';
import React from 'react'
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw';
import ScrollSpy from 'react-scrollspy-navigation';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

const ChangeLogPage = () => {

    const changelog = `
# v1.0.0

April 19, 2024

We're happy to announce our latest changes!

All notable changes to this project will be documented in this file.

## Twitch bot

### Features

- **Multi-Channel Streaming**: Users can now stream to multiple channels simultaneously without additional setups for each channel.
- **Enhanced Command Recognition**: Improved the command recognition algorithm to better distinguish between commands and general chat.
- **Interactive Polls**: Implement interactive polls directly from the chat command.
- **Automated Timers**: Users can set automated messages or actions based on timers.
- **Custom Command Creation**: Users can now create custom commands directly through a GUI in the dashboard.

### Security Updates

- **OAuth Token Encryption**: Enhanced security for storing OAuth tokens. Tokens are now encrypted using AES-256.
- **Rate Limiting**: Implemented IP-based rate limiting to prevent abuse of the service.
- **Advanced Spam Filters**: New spam filters have been added to prevent spamming in chat.

### Known Issues

- The bot might occasionally disconnect from Twitch due to rate limits imposed by the Twitch API. We are working on a workaround.
- Some users have reported intermittent issues with the custom command creation feature not saving their settings.

### Bug Fixes

- Fixed a bug where the bot would not reconnect automatically after losing connection.
- Resolved an issue where certain emojis were not being displayed correctly in chat.
- Fixed a bug where vote counts in polls were not accurately reflected in real-time.

## Discord bot

### Features

- **Auto-Moderation**: Added auto-moderation capabilities to automatically remove messages that contain offensive content.
- **User Role Management**: Servers can now automate role assignments based on user activity levels.
- **Voice Channel Management**: Improved tools for managing voice channels, including auto-mute capabilities for noisy users.
- **Server Analytics**: Added detailed analytics for server owners to monitor activity and engagement.

### Security Updates

- **Improved Session Management**: Sessions are now more secure with automatic timeouts after 24 hours of inactivity.
- **Two-Factor Authentication Support**: Added support for two-factor authentication for bot administrators.
- **Data Encryption at Rest**: All sensitive data is now encrypted at rest to enhance security.

### Known Issues

- There is a minor issue where the bot does not correctly count messages in channels with over 1,000 users.
- Users have reported that notifications sometimes do not arrive in real-time.

### Bug Fixes

- Fixed an issue where the bot would fail to send notifications to the admin channel under certain conditions.
- Corrected a problem where voice channel controls were unresponsive on certain devices.

## Dashboard

### Features

- **Real-Time Analytics**: Introduced real-time analytics for users to see live data about their channel's interaction.
- **Customizable Widgets**: Users can now customize widgets on their dashboard to better fit their needs.
- **Theme Customization**: Added the ability to customize the look and feel of the dashboard.
- **Multi-Language Support**: The dashboard now supports multiple languages, making it accessible to a global audience.

### Security Updates

- **Session Encryption**: Enhanced dashboard session encryption using secure hash algorithms.
- **Regular Security Audits**: Implemented monthly security audits to ensure that the dashboard remains secure against new threats.
- **Improved User Authentication Process**: Enhanced the user authentication process to prevent unauthorized access.

### Known Issues

- Some users have reported slow loading times on the analytics page when accessing data for more than 30 days.
- There have been reports of the theme customization settings not being saved for some users.

### Bug Fixes

- Corrected a display issue on the dashboard where graphs would overlap on smaller screens.
- Resolved an error where the dashboard would occasionally log out users prematurely.
- Fixed a problem where the language settings were not being applied immediately.

---

For further assistance or to report any issues, please contact our support team at support@example.com. Thank you for using our software, and we look forward to bringing you more updates in the future!

    `

    return (
        <>
            <div className='grid grid-cols-5 gap-4 mb-8'>
                <div className='col-start-1 col-span-1 mt-8'>
                    <div className='fixed left-32'>
                        <ScrollSpy activeClass="bg-primary" offsetTop={80}>
                            <nav>
                                <ul>
                                    <li className='list-none'>
                                        <a href="#twitch-bot">Section 1</a>
                                    </li>
                                    <li className='list-none'>
                                        <a href="#discord-bot">Section 2</a>
                                    </li>
                                    <li className='list-none'>
                                        <a href="#dashboard">Section 3</a>
                                    </li>
                                </ul>
                            </nav>
                        </ScrollSpy>
                    </div>
                </div>
                <div className='col-start-2 col-span-3'>
                    <Markdown rehypePlugins={[ rehypeRaw, rehypeSlug, [ rehypeAutolinkHeadings, {
                        behavior: 'append', properties: {
                            className: [ 'anchor-link' ]
                        },
                        content: ({ tagName }: { tagName: string }) => {
                            if (tagName === 'h1' || tagName === 'h3' || tagName === 'h4') {
                                return [];
                            }
                            return [ {
                                type: 'text',
                                value: ' #'
                            } ];
                        }
                    } ] ]} remarkPlugins={[ remarkGfm ]}>
                        {changelog}
                    </Markdown>
                </div>
                <div className='col-start-5 col-span-1 mt-8'>

                    <div className='fixed right-32 z-50 justify-between p-4'>
                        <ScrollSpy activeClass="bg-primary" threshold={0} offsetTop={80}>
                            <nav>
                                <ul>
                                    <li className='list-none'>
                                        <a href="#twitch-bot">Twitch Bot</a>
                                    </li>
                                    {/* create a sub listitem */}
                                    <ul>
                                        <li className='list-none'>
                                            <a href="#features">Features</a></li>
                                        <li className='list-none'>
                                            <a href="#security-updates">Security Updates</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#known-issues">Known Issues</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#bug-fixes">Bug Fixes</a>
                                        </li>
                                    </ul>
                                    <li className='list-none'>
                                        <a href="#discord-bot">Discord Bot</a>
                                    </li>
                                    <ul>
                                        <li className='list-none'>
                                            <a href="#features-1">Features</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#security-updates-1">Security Updates</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#known-issues-1">Known Issues</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#bug-fixes-1">Bug Fixes</a>
                                        </li>
                                    </ul>
                                    <li className='list-none'>
                                        <a href="#dashboard">Dashboard</a>
                                    </li>
                                    <ul>
                                        <li className='list-none'>
                                            <a href="#features-2">Features</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#security-updates-2">Security Updates</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#known-issues-2">Known Issues</a>
                                        </li>
                                        <li className='list-none'>
                                            <a href="#bug-fixes-2">Bug Fixes</a>
                                        </li>
                                    </ul>
                                </ul>
                            </nav>
                        </ScrollSpy>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ChangeLogPage

[toviszsolt]

@RedEagle-dh there are two possible solutions to your problem:

1. By customizing the rootMargin prop you can specify which part of the screen should be spied on. https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/ https://blog.webdevsimplified.com/2022-01/intersection-observer/

2. Try to add id attribute to full containers instead of heading tags. In this case, the library will watch for the height of visible boxes and content with a higher ratio will be marked.

I hope you can find the best configuration for your project. Let me know back with any feedback.

[RedEagle-dh]

I added rootMargin='-25px 0px 0px 0px' and changed the threshold from 0 to 1 and now it works!

Thank you very much!

[toviszsolt]

@RedEagle-dh good news, have fun! 🤓