https://majestic-mods.ru/js/sticky-active.js

1document.addEventListener("DOMContentLoaded", function () {
2 const menu = document.getElementById("stickyMenu");
3 const content = document.getElementById("dle-content");
4 const placeholder = document.createElement("div");
5 placeholder.classList.add("menu-placeholder");
6
7 const sortBlock = menu.querySelector(".sortBlock23"); // получаем блок сортировки
8 const menuOffsetTop = menu.offsetTop;
9
10 function updateStickyStyles() {
11 const contentRect = content.getBoundingClientRect();
12
13 // Уменьшаем ширину и немного смещаем
14 menu.style.width = (content.offsetWidth - 20) + "px";
15 menu.style.left = (contentRect.left + 10) + "px";
16
17 if (menu.classList.contains("sticky-active")) {
18 placeholder.style.height = menu.offsetHeight + "px";
19 }
20 }
21
22 function handleSticky() {
23 const isMobile = window.innerWidth <= 768;
24
25 if (window.scrollY >= menuOffsetTop) {
26 if (!menu.classList.contains("sticky-active")) {
27 menu.classList.add("sticky-active");
28 placeholder.style.height = menu.offsetHeight + "px";
29 menu.parentNode.insertBefore(placeholder, menu);
30 }
31 updateStickyStyles();
32
33 // скрыть сортировку на мобильных
34 if (isMobile && sortBlock) {
35 sortBlock.style.display = "none";
36 }
37
38 } else {
39 if (menu.classList.contains("sticky-active")) {
40 menu.classList.remove("sticky-active");
41 if (placeholder.parentNode) {
42 placeholder.parentNode.removeChild(placeholder);
43 }
44 menu.style.width = "";
45 menu.style.left = "";
46
47 // вернуть сортировку обратно
48 if (sortBlock) {
49 sortBlock.style.display = "";
50 }
51 }
52 }
53 }
54
55 window.addEventListener("scroll", handleSticky);
56 window.addEventListener("resize", () => {
57 updateStickyStyles();
58 handleSticky(); // пересчитать поведение при изменении размера
59 });
60});