Задать вопрос
@pcmyonelove

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

Есть контентная область с верхним меню (переключение вкладок), нужно сделать так чтобы при скроллинге страницы, когда карточки уходят вверх, меню оставалось на том же месте фиксированно. Переделывать верстку шаблона нет желания и времени, т.к это конструктор на Wordpress и нужно будет все переверстывать. Пробовал задавать позицию position: fixed = не работает, далее пробовал динамически менять высоту при скроллинге на jQuery = работает но криво и дергано, переопределил общий скролл страницы и задал блоку фикс высоту, работало но на Маке сказали что работает криво и не приняли т_т. Прошу ваш совет, то что придумал, я пробовал. Очень нужна ваша помощь, я новичок в этом, готов оплатить.

2 варианта, которые я делал, еще в стилях CSS убирал скролл:
jQuery(document).scroll(function () {
    var scroll = jQuery(this).scrollTop();
    var topDist = jQuery('.wpb_wrapper.tabbed.clearfix').eq(0).position();
    var tabMenu = jQuery('.wpb_tabs_nav.ui-tabs-nav').eq(0);

    if (scrollTimeout) {
        clearTimeout(scrollTimeout);
    }

    if (tabMenu.css('visibility') != 'hidden') {
      tabMenu.css('visibility', 'hidden');
      console.info('TT:0');
    }

    if (scroll > topDist.top) {
      console.info('TT:1');
      scrollTimeout = setTimeout(function() {
        tabMenu = jQuery('.wpb_tabs_nav.ui-tabs-nav').eq(0);
        console.info('TT:2');
        if (tabMenu.css('visibility') == 'hidden') {
            console.info('TT:3');
            tabMenu.css({
              "position":"relative", 
              "top": (scroll - 30) + "px", 
              "border-bottom-left-radius" : "12px", 
              "border-bottom-right-radius" : "12px", 
              "border-top-right-radius" : "12px", 
              "box-shadow" : "0 2px 12px rgb(0 0 0 / 7%)",
              "visibility": "visible"
            });
        }
      }, 700);
    } else {
      tabMenu.css({
        "position":"relative",
        "top":"-10px", 
        "border-bottom-left-radius" : "0", 
        "border-bottom-right-radius" : "0", 
        "border-top-right-radius" : "0", 
        "box-shadow" : "none",
        "visibility": "visible"
      });
    }
  });
}
// вариант 2
 if (jQuery(window).width() >= 768) {
   // Функция для переопределения стандартного скроллинга
   jQuery(document).bind('mousewheel DOMMouseScroll wheel', function(e) {
     e.preventDefault();
     var delta = e.originalEvent.deltaY || e.originalEvent.detail || e.originalEvent.wheelDelta;
     var $element = jQuery('.wpb_wrapper.tabbed.clearfix').eq(0);
     var scrollTop = $element.scrollTop();
     var scrollAmount = 300;
    
     if (delta < 0) {
       scrollTop -= scrollAmount;
     } else {
       scrollTop += scrollAmount;
     }
    
     $element.stop().animate({ scrollTop: scrollTop }, 300);
   });
}


Вот пример (tab1, tab2, tab3 - меню которое нужно зафиксировать):
65e04cf5a6ec0064730490.jpeg
  • Вопрос задан
  • 83 просмотра
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@cssfish
Плохое знание основ - причина больших бед
1. замеряем сколько Px от верах страницы до табов (a)
2. при скролле замеряем насколько проскроллили (b)
3. если b > a, добавляем блоку табов класс is-active (например)
4. в стилях описываем его положение, проще всего через fixed
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
12 дек. 2024, в 21:16
15000 руб./за проект
12 дек. 2024, в 21:13
300 руб./за проект
12 дек. 2024, в 21:09
10000 руб./за проект