Позиционирование UL абсолютно, когда родитель переполнен скрытый

Question

Я пытаюсь создать «мега-навигатор», только я сталкиваюсь с некоторыми проблемами, когда использую пользовательскую полосу прокрутки.

Моя проблема заключается в том, что пользовательский scrollbar добавляет добавление переполнения, скрытое к моему nav, и в результате элемент .sub-nav становится скрытым.

Единственное решение, о котором я могу думать, это добавить позицию, закрепленную на элементе .sub-nav, а затем поместить его с помощью JavaScript, который очень грязный и не такой надежный.

Я наклеил две скрипки, показывающие, что я имею в виду, - я надеюсь, что это имеет смысл, и любой совет будет очень благодарен!

Благодаря

Без Plugin

http://jsfiddle.net/f4qh27n7/11/

С плагином

http://jsfiddle.net/f4qh27n7/10/

Функция позиции элемент

function calcNav(){ 
if($('#breadcrumb').length > 0){ 
    var b = $('#breadcrumb').offset().top; 
    var w = $(window).scrollTop(); 
    var x = b - w; 
    $('.sub-nav').css('top', x); 
} 

} 
calcNav(); 

var scrollTimeout; 
$(window).scroll(function() { 
    clearTimeout(scrollTimeout); 
    scrollTimeout = setTimeout(calcNav, 50); 
}); 

Answer 1

Очень похоже на решение @Lajon.

Просто нужно немного перестройки: http://jsfiddle.net/8zxq5jas/4/

вид, что вы искали?

$(".js-parent-category") 
    .on("mouseenter", function() { 
     var target = $(this).attr("data-sub-nav-target"); 
     var element = $("." + target); 
     element.addClass("active"); 
    }) 
    .on("mouseleave", function() { 
     var target = $(this).attr("data-sub-nav-target"); 
     var element = $("." + target); 
     element.removeClass("active"); 
    }); 

$(".demo").customScrollbar(); 

<ul class="products-nav btcf"> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul> 

<!-- Products Mega Nav --> 
<div class="mega-nav btcf"> 

    <ul class="parent-cat demo gray-skin scrollable"> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-1">Parent Category 1</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-2">Parent Category 2</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-3">Parent Category 3</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-4">Parent Category 4</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-5">Parent Category 5</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-6">Parent Category 6</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-7">Parent Category 7</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-8">Parent Category 8</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-9">Parent Category 9</a></li> 
     <li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-10">Parent Category 10</a></li> 
    </ul> 

    <div class="js-sub-nav-1 sub-nav"> 
     <h3>Sub Category 1</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-2 sub-nav"> 
     <h3>Sub Category 2</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-3 sub-nav"> 
     <h3>Sub Category 3</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-4 sub-nav"> 
     <h3>Sub Category 4</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-5 sub-nav"> 
     <h3>Sub Category 5</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-6 sub-nav"> 
     <h3>Sub Category 6</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-7 sub-nav"> 
     <h3>Sub Category 7</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-8 sub-nav"> 
     <h3>Sub Category 8</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-9 sub-nav"> 
     <h3>Sub Category 9</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

    <div class="js-sub-nav-10 sub-nav"> 
     <h3>Sub Category 10</h3> 
     <ul> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
      <li><a href="#">Child link</a></li> 
     </ul> 
    </div> 

</div> 

Answer 2

Мое предложение было бы переместить все свои суб-нав-х из демо-родителя.

Я хотел бы изменить структуру DOM к чему-то, как:

<div class="mega-nav"> 
    <div class="sub-nav"></div> 
    <div class="sub-nav"></div> 
    <div class="sub-nav"></div> 

    <ul class="parent-cat demo gray-skin"> 
      <li><a href="#">Parent Category</a></li> 
      <li><a href="#">Parent Category</a></li> 
      <li><a href="#">Parent Category</a></li> 
    </ul> 
</div> 

После изменения структуры DOM к одному выше вы можете использовать индекс() для целевого соответствующего содержания по наведению:

var tid; 
$('.sub-nav').hide(); 

$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseenter", function() { 
     $('.sub-nav').hide(); 
     clearTimeout(tid); 

     $($(".sub-nav")[$(this).index()]).show(); 
}); 

$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseleave", function() { 
    tid = setTimeout(function() { 
      $('.sub-nav').hide(); 
    }, 1000); 
    }); 

$(".demo").customScrollbar();  

Работа fiddle