Есть контентная область с верхним меню (переключение вкладок), нужно сделать так чтобы при скроллинге страницы, когда карточки уходят вверх, меню оставалось на том же месте фиксированно. Переделывать верстку шаблона нет желания и времени, т.к это конструктор на 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 - меню которое нужно зафиксировать):
