MediaWiki:Common.js — различия между версиями
Designer (обсуждение | вклад) |
24pm (обсуждение | вклад) м (выравнивание отступов) |
||
Строка 1: | Строка 1: | ||
− | + | $("#but1").click(function (event) { | |
− | + | if ($("#win1").is(':visible')) { | |
− | + | $("#win1").hide('slow'); | |
− | + | } else { | |
− | + | $("#win1").show('slow'); | |
− | + | if ($("#win2").is(':visible')) { | |
− | + | $("#win2").hide('slow'); | |
− | |||
} | } | ||
+ | } | ||
− | + | }); | |
− | + | $("#but2").click(function (event) { | |
− | + | if ($("#win2").is(':visible')) { | |
− | + | $("#win2").hide('slow'); | |
− | + | } else { | |
− | + | $("#win2").show('slow'); | |
− | + | if ($("#win1").is(':visible')) { | |
− | + | $("#win1").hide('slow'); | |
− | |||
} | } | ||
− | + | } | |
− | + | }); | |
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными | (function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными | ||
− | + | var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить | |
− | + | window.addEventListener('scroll', Ascroll, false); | |
− | + | document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100% | |
− | + | function Ascroll() { | |
− | + | if (b == null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями | |
− | + | var Sa = getComputedStyle(a, ''), s = ''; | |
− | + | for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя | |
− | + | 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'); // создать потомка | |
− | + | var kk = a.offsetWidth; | |
− | + | b.style.cssText = s + ' box-sizing: border-box;'; | |
− | + | a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым | |
− | b. | + | var l = a.childNodes.length; |
+ | for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты) | ||
+ | b.appendChild(a.childNodes[1]); | ||
} | } | ||
+ | a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение | ||
+ | a.style.padding = '0'; | ||
+ | a.style.border = '0'; // если элементу присвоен padding или border | ||
+ | } | ||
+ | if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера | ||
+ | b.className = 'sticky'; | ||
+ | b.style.right = '24px'; | ||
+ | } else { | ||
+ | b.className = ''; | ||
} | } | ||
− | })() | + | |
+ | } | ||
+ | })() |
Версия 11:11, 30 сентября 2016
$("#but1").click(function (event) { if ($("#win1").is(':visible')) { $("#win1").hide('slow'); } else { $("#win1").show('slow'); if ($("#win2").is(':visible')) { $("#win2").hide('slow'); } } }); $("#but2").click(function (event) { if ($("#win2").is(':visible')) { $("#win2").hide('slow'); } else { $("#win2").show('slow'); if ($("#win1").is(':visible')) { $("#win1").hide('slow'); } } }); (function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить window.addEventListener('scroll', Ascroll, false); document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100% function Ascroll() { if (b == null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями var Sa = getComputedStyle(a, ''), s = ''; for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя 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'); // создать потомка var kk = a.offsetWidth; b.style.cssText = s + ' box-sizing: border-box;'; a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым var l = a.childNodes.length; for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты) b.appendChild(a.childNodes[1]); } a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение a.style.padding = '0'; a.style.border = '0'; // если элементу присвоен padding или border } if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера b.className = 'sticky'; b.style.right = '24px'; } else { b.className = ''; } } })()