Как реализовать изменение содержимого при прокрутке?

Question

QuantumWanderer

css , html , javascript

Как реализовать изменение содержимого при прокрутке?

Как реализовать скроллинг-меню с функциональностью изменения контента при выборе пункта? Пример работы данной функциональности можно увидеть в этом видео: <a href="https://cloud.mail.ru/public/J8vB/LGHhrRe2X" rel="nofollow">https://cloud.mail.ru/public/J8vB/LGHhrRe2X</a>.

14 марта 2024 г. 13:39

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

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

Answer 1

Для реализации изменения содержимого при прокрутке и скроллинг-меню с функциональностью выбора пункта можно использовать языки программирования HTML, CSS и JavaScript.

Шаги для реализации:

1. Создайте главную страницу (index.html), на которой будет размещен контент и меню с пунктами.
2. Используйте CSS для стилизации меню и контента, а также для создания эффектов анимации при прокрутке и выборе пункта.
3. Для реализации функциональности изменения содержимого при прокрутке используйте JavaScript. Для этого можно добавить обработчик события scroll, который будет отслеживать прокрутку страницы и изменять содержимое в зависимости от текущей позиции прокрутки.
4. Для реализации скроллинг-меню с функциональностью выбора пункта можно также использовать JavaScript. Добавьте обработчик события click на пункты меню, который будет изменять отображаемый контент в соответствии с выбранным пунктом.

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Menu Example</title>
<style>
/* CSS стили для меню и контента */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    background: #333;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.menu a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    cursor: pointer;
}

.content {
    margin-top: 50px;
    padding: 20px;
    font-size: 20px;
    text-align: center;
}
</style>
</head>
<body>
<div class="menu">
    <a href="#" id="section1">Section 1</a>
    <a href="#" id="section2">Section 2</a>
    <a href="#" id="section3">Section 3</a>
</div>
<div id="section1" class="content">
    Content for Section 1
</div>
<div id="section2" class="content">
    Content for Section 2
</div>
<div id="section3" class="content">
    Content for Section 3
</div>

<script>
// JavaScript код для изменения содержимого при прокрутке и выборе пункта меню
const sections = document.querySelectorAll('.content');

const scrollToSection = (sectionId) => {
    const section = document.getElementById(sectionId);
    section.scrollIntoView({ behavior: 'smooth' });
}

document.querySelectorAll('.menu a').forEach(item => {
    item.addEventListener('click', (e) => {
        e.preventDefault();
        const sectionId = e.target.id;
        scrollToSection(sectionId);
    });
});

window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (pageYOffset >= (sectionTop - sectionHeight / 2)) {
            current = section.getAttribute('id');
        }
    });
    document.querySelectorAll('.menu a').forEach(item => {
        // Добавьте активный класс для текущего пункта меню
        item.classList.remove('active');
        if (item.getAttribute('id') === current) {
            item.classList.add('active');
        }
    });
});
</script>
</body>
</html>
```

Этот код реализует скроллинг-меню с функциональностью изменения контента при выборе пункта и прокрутке страницы. При прокрутке страницы содержимое меняется в зависимости от выбранного раздела, а при выборе пункта меню происходит плавная прокрутка к соответствующ

Answer 2

Либо неверный путь до скрипта, либо скрипт загружается раньше DOM, попробуйте так: 
 document.addEventListener('DOMContentLoaded', () => {
    const list = {
        'Audi': 'Audi AG — немецкая автомобилестроительная компания в составе концерна Volkswagen Group, специализирующаяся на выпуске автомобилей под маркой Audi. Штаб-квартира расположена в Ингольштадте.',
        'Volkswagen': 'Volkswagen — немецкая автомобильная марка, одна из многих, принадлежащих концерну Volkswagen AG. Под этой маркой в 2007 году было реализовано 5 млн 20 тыс. автомобилей. Штаб-квартира — в Вольфсбурге.',
        'Opel': 'Adam Opel AG — немецкий производитель автомобилей. Штаб-квартира расположена в Рюссельсхайме, Германия. Компания была основана 21 января 1863 года и приступила к выпуску автомобилей в 1899 году. С 1929 года принадлежала концерну General Motors.'
    }

    const el = document.querySelector('.container');
    el.addEventListener('change', () => {
        document.querySelector('.output').textContent = list[el.value];
    });
});