Как изменить цвет текста в фиксированном меню при прокрутке страницы?

Question

StarlitSwashbuckler

html , javascript

Как изменить цвет текста в фиксированном меню при прокрутке страницы?

Как изменить цвет текста в верхнем меню с черного на белый при прокрутке страницы, чтобы он адаптировался к цвету фона секций? Конкретно, мне нужно, чтобы текст меню становился белым при переходе к темной секции и возвращался к черному при возвращении к светлой секции, а также чтобы этот эффект сохранялся на протяжении всего скролла. Спасибо!

1 декабря 2024 г. 11:43

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для изменения цвета текста в фиксированном меню в зависимости от цвета фона секций, можно использовать JavaScript или jQuery вместе с CSS. Вот поэтапное объяснение, как это реализовать.

### Шаг 1: HTML структура меню и секций

Для начала убедитесь, что у вас есть фиксированное меню и секции с разными цветами фона. Примерная структура может выглядеть так:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Изменение цвета текста меню</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="menu" class="menu">
        <ul>
            <li>Главная</li>
            <li>О нас</li>
            <li>Услуги</li>
            <li>Контакты</li>
        </ul>
    </nav>
    <section class="light-section" id="section1">Светлая секция</section>
    <section class="dark-section" id="section2">Темная секция</section>
    <section class="light-section" id="section3">Светлая секция</section>
    <section class="dark-section" id="section4">Темная секция</section>
</body>
<script src="script.js"></script>
</html>
```

### Шаг 2: CSS стили

Добавьте стили для вашего меню и секций:

```css
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    transition: background 0.3s;
    z-index: 1000;
}

.menu ul {
    list-style-type: none;
    padding: 10px;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.menu li {
    color: black;
    transition: color 0.3s;
}

.light-section {
    height: 100vh;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
}

.dark-section {
    height: 100vh;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
}
```

### Шаг 3: JavaScript для определения положения прокрутки

Создайте файл `script.js` и добавьте следующий код:

```javascript
window.addEventListener('scroll', function() {
    const sections = document.querySelectorAll('section');
    const menu = document.getElementById('menu');
    const menuItems = document.querySelectorAll('.menu li');

    let currentSection = '';

    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;

        if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
            currentSection = section.getAttribute('id');
        }
    });

    menuItems.forEach(item => {
        if (currentSection.includes('dark')) {
            item.style.color = 'white';
        } else {
            item.style.color = 'black';
        }
    });
});
```

### Как это работает

1. **HTML и CSS** создают фиксированное меню и секции с разным фоном.
2. **JavaScript** добавляет обработчик события `scroll`, который проверяет, какая секция в данный момент видима на экране.
3. Если текущая секция темная, текст в меню становится белым; если светлая — черным.

### Результат

При прокрутке страницы цвет текста в меню будет меняться в зависимости от цвета фона текущей секции. Вы можете настроить стили и поведение под свои нужды.

Answer 2

Что то вроде этого?