Меню CSS Subnav Дисплеи Ниже Fold

Question

У меня есть вертикальное меню CSS с левым краем с subnavs, которые появляются справа.

Моя проблема заключается в том, что в последнем пункте меню есть много subnavs, которые заставляют их отображаться под складкой окна.

Есть ли какой-либо способ с помощью CSS или jQuery определить, произойдет ли это, и отрегулировать позицию так, чтобы все элементы подменю можно было увидеть?

Вот ссылка на мой пример (возможно, придется регулировать высоту окна):

<!--demo is at following link--> 

http://jsfiddle.net/otcq2ne0/

Answer 1

Вот обновление с помощью JQuery: http://jsfiddle.net/otcq2ne0/1/

$('body').on('mouseenter mouseover', '.vmdrop', function() { 
    var subNav = $('.vmenu-dropdown', this); 

    if (subNav.length) { 
     var pos = subNav[0].getBoundingClientRect(); 
     if (pos.bottom > window.innerHeight) { 
      var threshold = pos.top; 
      var buffer = 10; 
      var diff = window.innerHeight - (pos.bottom + buffer); 

      if (Math.abs(diff) > threshold) { 
       diff = '-' + (threshold + buffer); 
      } 

      if (Math.abs(diff) > 0) { 
       subNav.css({ top: diff + 'px' }); 
      } 
     } 
    } 
});