Как реализовать отображение активной страницы в navbar в зависимости от текущего положения пользователя?

  • 20 августа 2023 г. 21:16
Ответы на вопрос 1
Да, есть несколько способов реализации отображения активной страницы в navbar.

1. Через JavaScript: Вы можете использовать JavaScript для определения текущего положения пользователя и изменения активной страницы в navbar. Например, вы можете прослушивать событие прокрутки страницы и сравнивать положение каждого блока с положением пользователя. Если блок находится в видимой области, вы можете добавить класс активной странице в navbar. Вот пример кода:

```javascript
// Получить все блоки, на которые нужно сделать ссылки
const blocks = document.querySelectorAll('.block');

// Прослушивать событие прокрутки страницы
window.addEventListener('scroll', () => {
    // Получить текущую позицию пользователя
    const currentPosition = window.pageYOffset || document.documentElement.scrollTop;

    // Проверить каждый блок
    blocks.forEach((block, index) => {
        // Получить позицию блока
        const blockPosition = block.offsetTop;

        // Проверить, находится ли блок в видимой области
        if (currentPosition >= blockPosition && currentPosition < blockPosition + block.offsetHeight) {
            // Добавить класс активной страницы в navbar
            document.querySelectorAll('.navbar-link')[index].classList.add('active');
        } else {
            // Удалить класс активной страницы из navbar
            document.querySelectorAll('.navbar-link')[index].classList.remove('active');
        }
    });
});
```

2. Используя библиотеку, такую как jQuery или React: Если вы используете библиотеку, такую как jQuery или React, есть готовые компоненты и плагины, которые упрощают реализацию отображения активной страницы в navbar в зависимости от текущего положения пользователя. Например, в jQuery вы можете использовать плагин Scrollspy, а в React вы можете использовать пакет react-scrollspy.
Похожие вопросы