Фиксированный плавающий sidebar. Фиксированный плавающий sidebar Как сделать фиксированный сайдбар

Интересно, что блок, остающийся на одном месте при скроллинге, называют: «перемещающийся» , «плавающий» , «двигающийся» , «подвижный» , «скользящий» . А фактически он «прилипший» , «неподвижный» , «фиксорованный» и располагающийся на определённом участке экрана монитора, вне зависимости от степени прокрутки веб-страницы.

Исходный вариант, когда ничего не плавает

Изначальные данные: блок уже спозиционирован. У меня как-то так с большим футером, у вас — иначе.

Как сделать блок (div, aside и т.п), шапку, рекламу, меню фиксированными. Только CSS #aside1 { /* блока, который будет оставаться на месте */ position: fixed; z-index: 101; }

Собственно говоря, для большинства случаев: плавающие кнопки социальных сетей, счётчиков, скрипт не требуется.

Как сделать, чтобы блок div прилипал во время прокрутки страницы. Уже скрипт

То есть элемент со ссылками (или чем там ещё) находится далеко от начала страницы. Скажем, шапка большая или боковая колонка содержит много полезностей, таких как поиск, рубрики и т.п. Когда во время скроллинга верхняя часть окна браузера касается верхнего края элемента, то он приклеивается и "едет" вниз до конца страницы.

.sticky { position: fixed; top: 0 px; /* если ноль заменить на число (и в скрипте тоже), то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом. Применим, например, */ z-index: 101; } (function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными var a = document.querySelector("#aside1 "), b = null; // селектор блока, который нужно закрепить // если function Ascroll() { if (b == null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { // if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); // создать потомка b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым var l = a.childNodes.length; for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: , внутри которого по прежнему работают скрипты) b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; // если под скользящим элементом есть другие блоки, можно своё значение a.style.padding = "0"; a.style.border = "0"; // если элементу присвоен или } if (a.getBoundingClientRect().top #aside1 > div:nth-child(3), #aside2 > div:nth-child(2) ")).forEach(function(a) { // селекторы блоков, которые будут фиксироваться. Может быть как один блок, так два и более var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector("#article ").getBoundingClientRect().bottom + 0 ); if ((Ra.top - P) Array.prototype.slice.call(document.querySelectorAll("#aside1 div.stickyDa ")).forEach(function(a) { var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - a.parentNode.getBoundingClientRect().bottom + parseFloat(getComputedStyle(a.parentNode, "").paddingBottom.slice(0, -2))); if ((Ra.top - P) (function(){ var A0 = document.querySelector("#aside1 "), A1 = A0.querySelectorAll(".stickyDa "); Array.prototype.slice.call(A1).forEach(function(a, index) { var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R, Rh = Ra.top + b.getBoundingClientRect().height; if (A1 != undefined) { R = Math.round(Rh - A1.getBoundingClientRect().top + 5 ); // расстояние между блоками, чтобы плавающие элементы не прижимались вплотную друг к другу } else { R = Math.round(Rh - A0.getBoundingClientRect().bottom + parseFloat(getComputedStyle(A0, "").paddingBottom.slice(0, -2))); } if ((Ra.top - P) W) { if (Ra.top < K) { // скролл вниз if (R2 + N > R1) { // не дойти до низа if (Rb.bottom - W + N = 0) { // подцепиться b.className = "sticky"; b.style.top = P + "px"; Z = Ra.top - P; } else { b.className = "stop"; b.style.top = - Z + "px"; } } else { b.className = ""; b.style.top = ""; Z = 0; } } K = Ra.top; } else { if ((Ra.top - P) Виджеты. Открываем тот виджет, который хотим сделать фиксированным.

Ставим галочку возле «Зафиксировать виджет» и нажимаем кнопку «Сохранить».

Другие способы реализации скользящих блоков

Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.

Вариант #1 (без jQuery)

В сайдбар вставляем:

Прописываем стили в HTML (лучше добавить сразу в CSS):

.sticky {
position: fixed;
z-index: 101 ;
}
.stop {
position: relative;
z-index: 101 ;
}

Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):