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

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.
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;
}
Zostaw komentarz Anuluj komentarz