MediaWiki:Common.js — различия между версиями

Материал из СисадминВики песочница
Перейти к: навигация, поиск
Строка 43: Строка 43:
 
         $("#block").css("max-height",xx);
 
         $("#block").css("max-height",xx);
 
    
 
    
          
+
         if (b == null) {  // добавить потомка-обёртку, чтобы убрать зависимость с соседями
        if (z - $(window).scrollTop() < 0) {  
+
            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.height = '950px';  // если под скользящим элементом есть другие блоки, можно своё значение
 +
           
 +
            a.style.padding = '0';
 +
            a.style.border = '0';  // если элементу присвоен padding или border
 +
        }
 +
        if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
 
            
 
            
 
           $("#aside1").offset({top:$(window).scrollTop()});
 
           $("#aside1").offset({top:$(window).scrollTop()});
 +
            //b.className = 'sticky';
 +
            //b.style.right = '7px';
 +
        } else {
 +
            //b.className = '';
 +
        }
 
              
 
              
           
 
        }
 
 
     }
 
     }
 
})()
 
})()

Версия 07:17, 5 октября 2016

$(function() {
    
    var xx = document.body.offsetHeight -($("#aside1").offset().top+65);
    xx = xx + 'px';
    $("#block").css("max-height",xx);
});

$("#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');
        }
    }
});
var z = $("#aside1").offset().top;
(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() {
    	$("#aside1").offset({top:z});
        var xx0 = z - $(window).scrollTop();
        if (xx0 < 0) { xx0 = 0;}

    	var xx = document.body.offsetHeight -(65+xx0);
        xx = xx + 'px';
        $("#block").css("max-height",xx);
    	
        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.height = '950px';  // если под скользящим элементом есть другие блоки, можно своё значение
            
            a.style.padding = '0';
            a.style.border = '0';  // если элементу присвоен padding или border
        }
        if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
       	    
           $("#aside1").offset({top:$(window).scrollTop()});
            //b.className = 'sticky';
            //b.style.right = '7px';
        } else {
            //b.className = '';
        }
            
    }
})()