Как сделать прокрутку горизонтального меню при прокрутке страницы по вертикали?
Используется библиотека jquery последний версии.
Задача заключается в следующем:
Есть горизонтальное меню с прокруткой, то есть элементы уходят за экран. Ссылки в меню сделаны якорями и ведут на блоки на странице.
Сейчас есть отслеживание элемента меню при прокрутке по странице, то есть если блок находится на экране вверху, пункту меню присваивается класс "active", при прокрутке ниже класс переходит другому пункту, в соответсвии с блоком.
Но появляется проблема - при прокрутке ниже по сайту - не двигается меню (горизонтальное), то есть становится не видно, какой пункт меню сейчас.
Попытался реализовать отслеживание через вот такую конструкцию:
jQuery(window).scroll(function(){ var scrollToOld = 0; var $sections = $('section'); $sections.each(function(i,el){ var top = $(el).offset().top-10; var bottom = top +$(el).height(); var scroll = $(window).scrollTop(); var id = $(el).attr('id'); if( scroll > top && scroll < bottom){ $('a.active--products-category-menu').removeClass('active--products-category-menu'); $('a[href="#'+id+'"]').addClass('active--products-category-menu'); var idElement = $('a[href="#'+id+'"]').attr('id'); var iddiv = $('.active--products-category-menu').parent().attr("id"); //var iddiv = $('.active--products-category-menu').parent().attr("id"); var scrollTo = $('#'+idElement).offset().left; var link = $('a[href="#'+id+'"]'); $( ".wrapper-product-category-menu" ).scrollLeft( scrollTo ); console.log('ID элемента секции id '+id); console.log('Координаты scrollTo '+scrollTo); console.log('ID элемента idElement '+idElement); console.log('ID родителя iddiv '+iddiv); console.log('#'+idElement); |
jQuery(window).scroll(function(){ var scrollToOld = 0; var $sections = $('section'); $sections.each(function(i,el){ var top = $(el).offset().top-10; var bottom = top +$(el).height(); var scroll = $(window).scrollTop(); var id = $(el).attr('id'); if( scroll > top && scroll < bottom){ $('a.active--products-category-menu').removeClass('active--products-category-menu'); $('a[href="#'+id+'"]').addClass('active--products-category-menu'); var idElement = $('a[href="#'+id+'"]').attr('id'); var iddiv = $('.active--products-category-menu').parent().attr("id"); //var iddiv = $('.active--products-category-menu').parent().attr("id"); var scrollTo = $('#'+idElement).offset().left; var link = $('a[href="#'+id+'"]'); $( ".wrapper-product-category-menu" ).scrollLeft( scrollTo ); console.log('ID элемента секции id '+id); console.log('Координаты scrollTo '+scrollTo); console.log('ID элемента idElement '+idElement); console.log('ID родителя iddiv '+iddiv); console.log('#'+idElement);
Но при отладке вижу, что координаты scrollTo (позиция элемента на странице) - всегда разное, из-за этого происходит вот такая вещь:
https://cloud.mail.ru/public/ktLo/Mj9gyg3PX
Из-за разных координат меню начинает прыгать.
Хотелось бы понять:
1. Почему координаты разные, что с ними происходит?
2. Как в целом правильно реализовать задумку? Пример, как это выглядит в яндекс еде в приложении:
https://cloud.mail.ru/public/MdQu/nLpdRauoH
Код в песочнице: https://codepen.io/uhesfyft-the-encoder/pen/YzMqajW
Дополнительно:
сделайте песочницу, а то из кода, где обращения такое впечатление что идут рандомно — лишь бы к чему-то, не совсем понятно, что есть что
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации прокрутки горизонтального меню при прокрутке страницы по вертикали, вам потребуется использовать JavaScript. Вот пример кода, который вы можете использовать:
// Получаем элемент меню var menu = document.getElementById('yourMenuId'); // Получаем верхнюю позицию меню var menuTopPosition = menu.offsetTop; // Обработчик события прокрутки страницы window.addEventListener('scroll', function() { // Получаем текущую позицию прокрутки страницы var scrollPosition = window.scrollY || window.pageYOffset; // Проверяем, достиг ли пользователь верхней позиции меню if (scrollPosition >= menuTopPosition) { // Добавляем класс для фиксации меню menu.classList.add('fixed-menu'); } else { // Удаляем класс для фиксации меню menu.classList.remove('fixed-menu'); } });
В данном примере мы добавляем обработчик события прокрутки страницы, который проверяет текущую позицию прокрутки. Если пользователь достиг верхней позиции меню, мы добавляем класс 'fixed-menu' к элементу меню, который фиксирует его на экране. В противном случае класс удаляется и меню возвращается к обычному состоянию.
Вы можете стилизовать элемент меню с классом 'fixed-menu' с помощью CSS, чтобы он оставался видимым и прикрепленным к верхней части экрана при прокрутке страницы. Не забудьте добавить соответствующие стили для класса 'fixed-menu' в вашем CSS файле.