Jolly
25.06.2017, 20:37
Здравствуйте.
Есть фиксированное меню на Js, вроде бы все отлично, но есть одно "НО". Когда меню не помещается на экране, оно не прокручивается. Пробовала ставить overlaw:auto, но оно почему-то не подходит. Так же оно не подходит, так как в меню есть подменю, которое располагается справа,и если ставить значение overlaw:auto, оно обрезает подменю. Уже неделю бьюсь, не знаю как решить :cray: , подскажите пожалуйста варианты.
Вот код JS: (function(){
var a = document.querySelector('#left-col'), b = null;
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('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[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
if (a.getBoundingClientRect().top <= 0) {
b.className = 'sticky';
} else {
b.className = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
})()
.sticky {
position: fixed;
top: 90px;
}
Есть фиксированное меню на Js, вроде бы все отлично, но есть одно "НО". Когда меню не помещается на экране, оно не прокручивается. Пробовала ставить overlaw:auto, но оно почему-то не подходит. Так же оно не подходит, так как в меню есть подменю, которое располагается справа,и если ставить значение overlaw:auto, оно обрезает подменю. Уже неделю бьюсь, не знаю как решить :cray: , подскажите пожалуйста варианты.
Вот код JS: (function(){
var a = document.querySelector('#left-col'), b = null;
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('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[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
if (a.getBoundingClientRect().top <= 0) {
b.className = 'sticky';
} else {
b.className = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
})()
.sticky {
position: fixed;
top: 90px;
}