Показать сообщение отдельно
  #1 (permalink)  
Старый 25.06.2017, 20:37
Аспирант
Отправить личное сообщение для Jolly Посмотреть профиль Найти все сообщения от Jolly
 
Регистрация: 11.03.2017
Сообщений: 40

Фиксированное меню с скролом, без overlaw:auto.
Здравствуйте.

Есть фиксированное меню на Js, вроде бы все отлично, но есть одно "НО". Когда меню не помещается на экране, оно не прокручивается. Пробовала ставить overlaw:auto, но оно почему-то не подходит. Так же оно не подходит, так как в меню есть подменю, которое располагается справа,и если ставить значение overlaw:auto, оно обрезает подменю. Уже неделю бьюсь, не знаю как решить , подскажите пожалуйста варианты.

Вот код 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;  
}
Ответить с цитированием