Демонстрационная страница
Этот блок предназначен для демонстрации работы шапки, подвала, плавающих кнопок и индикатора прогресса. При вставке в другие страницы замените содержимое тега <main> на свой контент.
Логотип слева, бургер-меню справа — работают на всех страницах.
Прокрутите страницу вниз, чтобы увидеть появление плавающих кнопок «Домой» и «Наверх», а также изменение индикатора прогресса (тонкая медная полоса + проценты справа).
Индикатор прогресса отслеживает прокрутку всей страницы. В самом верху — 0%, в самом низу — 100%.
Для использования на других страницах: скопируйте весь код, замените содержимое <main> на свой контент и при необходимости измените пункты меню в бургере и футере.
Раздел 1. Демонстрация прокрутки
Lorem ipsum odor amet, consectetuer adipiscing elit. Himenaeos turpis nunc cras platea ipsum parturient ullamcorper. Tellus nulla scelerisque himenaeos tortor habitant semper netus. Condimentum curae et quam quisque turpis lacinia hendrerit sociosqu. Metus porttitor erat platea ultrices sapien massa posuere.
Purus nisl vitae morbi urna etiam maecenas. Pharetra etiam odio adipiscing diam aliquam facilisis. Nascetur quis amet maecenas pellentesque erat nibh aliquet. Faucibus nisl conubia semper dictumst conubia etiam curabitur ultricies. Etiam urna adipiscing ultrices ut quis consectetur semper. Gravida ac inceptos integer rutrum hac vulputate quis. Nascetur iaculis aliquet adipiscing non ornare, varius dapibus.
Раздел 2. Демонстрация прокрутки
Lorem ipsum odor amet, consectetuer adipiscing elit. Himenaeos turpis nunc cras platea ipsum parturient ullamcorper. Tellus nulla scelerisque himenaeos tortor habitant semper netus. Condimentum curae et quam quisque turpis lacinia hendrerit sociosqu. Metus porttitor erat platea ultrices sapien massa posuere.
Purus nisl vitae morbi urna etiam maecenas. Pharetra etiam odio adipiscing diam aliquam facilisis. Nascetur quis amet maecenas pellentesque erat nibh aliquet. Faucibus nisl conubia semper dictumst conubia etiam curabitur ultricies. Etiam urna adipiscing ultrices ut quis consectetur semper. Gravida ac inceptos integer rutrum hac vulputate quis. Nascetur iaculis aliquet adipiscing non ornare, varius dapibus.
Раздел 3. Демонстрация прокрутки
Lorem ipsum odor amet, consectetuer adipiscing elit. Himenaeos turpis nunc cras platea ipsum parturient ullamcorper. Tellus nulla scelerisque himenaeos tortor habitant semper netus. Condimentum curae et quam quisque turpis lacinia hendrerit sociosqu. Metus porttitor erat platea ultrices sapien massa posuere.
Purus nisl vitae morbi urna etiam maecenas. Pharetra etiam odio adipiscing diam aliquam facilisis. Nascetur quis amet maecenas pellentesque erat nibh aliquet. Faucibus nisl conubia semper dictumst conubia etiam curabitur ultricies. Etiam urna adipiscing ultrices ut quis consectetur semper. Gravida ac inceptos integer rutrum hac vulputate quis. Nascetur iaculis aliquet adipiscing non ornare, varius dapibus.
