Обсудить проект
Удобный способ связи
Modif 0

Фиксация Zero block при скролле

Как зафиксировать Zero block сверху

  1. Текст
<style>
/* EXAMPLE 1 */
/* id фиксированного блока */
#rec12345678 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
}
</style>

Как зафиксировать Zero block снизу

  1. Текст
<script>
$("document").ready(function() {
/* #recxxxxxxx — id Зеро блока (меню 1-го уровня, основной) */
    var mainMenuBlock = "#rec323041053";
    var hoverLeave = $(mainMenuBlock).find(".t396__elem").not($("[href='#menuhover']").parent());

/* #recyyyyyy — id Зеро блока (меню 2-го уровня, который будет всплывать) */
    var secondaryMenuBlock = "#rec323251944";
    var menuArtboardHover = $(secondaryMenuBlock).find(".t396__artboard");

    $("[href='#menuhover']").hover(function(e) {
        e.preventDefault();
        if(!menuArtboardHover.hasClass("open")) {
            menuArtboardHover.addClass("open");
        }
    });
    
    menuArtboardHover.mouseleave(function(e) {
        e.preventDefault();
        menuArtboardHover.removeClass("open");
    });

    $(hoverLeave).mouseenter(function(e) {
        e.preventDefault();
        menuArtboardHover.removeClass("open");
    });

    $(window).scroll(function(e) {
        menuArtboardHover.removeClass("open");
    });
});
</script>

<style>
/* #rec207720047 — id Зеро блока (меню 1-го уровня, основной) */
#rec323041053 {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 998;
}

/* #rec207720048 — id Zero блока (меню 2-го уровня, который будет всплывать) */
#rec323251944 .t396__artboard {
    z-index: 997;
    position: fixed;
    margin: auto;
    top: 75px; /* высота Zero блока (меню 1-го уровня, основной) */
    left: 0;
    transition: all .8s ease;
    pointer-events: none;
    transform: translateY(-600px); /* сумма высот Zero блоков, которые играют роль меню (1-го и 2-го уровня) */
    justify-content: space-around;
    box-shadow: 0 9px 9px 0 rgba(0, 0, 0, .09);
}

.open {
    pointer-events: all !important;
    transform: translateY(0px) !important;
}
</style>