Блог

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

Как показано на рисунке ниже, у меня проблема с тем, что Активная категория исчезает из поля зрения, а прокрутка навигационной панели не соответствует категории активного класса.

Активная категория, сидящая вне прокрутки

На этом изображении категория отображается за пределами экрана

Активный выход за пределы экрана в пределах полосы прокрутки

Чего я пытаюсь добиться, так это того, что он будет прокручиваться вместе с каждой активной категорией. У меня есть несколько jQuery вместо предыдущих попыток.

Вот HTML-код

 lt;nav class="navbar order-nav sticky-top mt-4" role="navigation" id="order-nav"gt;  lt;ul class="nav order-nav-list" id="menuCats"gt;  lt;li class="nav-item"gt;lt;a class="nav-link ordernav-item active" href="#Sandwiches-link"gt;Sandwicheslt;/agt;lt;/ligt;  lt;li class="nav-item"gt;lt;a class="nav-link ordernav-item" href="#Pizza-link"gt;Pizzalt;/agt;lt;/ligt;  lt;li class="nav-item"gt;lt;a class="nav-link ordernav-item" href="#Custom-Cat-link"gt;New Customisation Categorylt;/agt;lt;/ligt;  lt;li class="nav-item"gt;lt;a class="nav-link ordernav-item" href="#Drinks-link"gt;Drinkslt;/agt;lt;/ligt;  lt;li class="nav-item"gt;lt;a class="nav-link ordernav-item" href="#Soups-link"gt;Soupslt;/agt;lt;/ligt;  lt;/ulgt;  lt;brgt;  lt;div class="nav order-nav-list border-0" id="minspend-display"gt;  lt;p class="mb-0" id="minimum-spend" style="font-size: 12px; text-align: center;"gt;There is no minimum spend for this venuelt;/pgt;  lt;/divgt; lt;/navgt;  

Вот jQuery

 $(window).on('scroll', function() {  var i = $(this).val() - 1;  activeItem(i); });  $('.order-nav-list').on('click', '.nav-item', function() {  activeItem($(this).index()); });  function activeItem(i) {  $('.ordernav-item').removeClass('active');  var active = $('.ordernav-item').eq(i).addClass('active');  var left = active.position().left;  var currScroll = $("#order-nav").scrollLeft();  var contWidth = $('#order-nav').width() / 2;  var activeOuterWidth = active.outerWidth() / 2;  left = left   currScroll - contWidth   activeOuterWidth;  $('#order-nav').animate({  scrollLeft: left }, 'slow'); }