Sticky header - menu przyklejone do górnej krawędzi ekranu w PrestaShop 1.7
   02/01/2022 12:57:31    Komentarze 0
Sticky header - menu przyklejone do górnej krawędzi ekranu w PrestaShop 1.7

Jeśli chcesz mieć meny zawsze przyklejone do górnej krawędzi sklepu to w tym poradniki przedstawiamy sposób jak to wykonać w sklepie.

Zobacz poradnik








const menu = document.getElementById("_desktop_top_menu");
const sticky = menu.offsetTop;
var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
window.addEventListener("scroll", function() { // or window.addEventListener("scroll"....

    if (window.pageYOffset > sticky) {
        menu.classList.add('sticky');
    } else {
        menu.classList.remove('sticky');
    }

    var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
    if (st > lastScrollTop) {
        menu.style.top = "-60px";
    } else {
        menu.style.top = "0";
    }
    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

#header .header-top .position-static.sticky {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #ffffff;
    padding-top: 10px;
    box-shadow: 1px 5px 15px #ccc;
    transition: .5s;
}

Więcej postów:

Komentarze ()

Zostaw komentarz