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

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

2 варианта, которые я делал, еще в стилях CSS убирал скролл:

Вот пример (tab1, tab2, tab3 - меню которое нужно зафиксировать):

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

Дополнительно:

position: sticky; top: 0;?
ну или в top высоту header-а, если он тоже сверху страницы всегда болтается

Ответы:

1. замеряем сколько Px от верах страницы до табов (a)
2. при скролле замеряем насколько проскроллили (b)
3. если b > a, добавляем блоку табов класс is-active (например)
4. в стилях описываем его положение, проще всего через fixed

+ Заказать

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

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

    Для зафиксирования меню с вкладками над контентом внутри страницы можно использовать CSS и JavaScript. Для начала создадим HTML структуру страницы с меню и контентом:

    html

    Fixed Tabs Menu



    Tab 1 Content

    This is the content of Tab 1.

    Tab 2 Content

    This is the content of Tab 2.

    Tab 3 Content

    This is the content of Tab 3.

    Теперь создадим стили для меню и контента в файле styles.css:

    css
    .tabs {
    overflow: hidden;
    background-color: #f1f1f1;
    }

    .tablink {
    float: left;
    display: block;
    background-color: #ccc;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    .tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    }

    .tablink:hover {
    background-color: #ddd;
    }

    .tablink.active {
    background-color: #e9e9e9;
    }

    Наконец, добавим JavaScript для функциональности переключения вкладок в файле script.js:

    javascript
    function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
    }

    Теперь при прокрутке страницы меню с вкладками будет оставаться видимым над контентом благодаря CSS свойству position: fixed;. Важно протестировать на различных устройствах и браузерах, чтобы убедиться, что меню корректно работает и отображается.

Оставить комментарий