当父级溢出隐藏时，绝对定位UL

Positioning UL absolutely when parent is overflow hidden

本文关键字：定位 UL 溢出 隐藏      更新时间：2023-09-26

我正在尝试构建一个"超级导航"，但当我使用自定义滚动条时遇到了一些问题。

我的问题是，自定义scrollbar添加了标记，将溢出隐藏到我的nav，结果.sub-nav元素变为隐藏。

我能想到的唯一解决方案是将位置固定到.sub-nav元素，然后使用JavaScript对其进行定位，这非常混乱，也不那么可靠。

我粘贴了两个小提琴来展示我的意思——我希望这些都有意义，任何建议都将不胜感激！

感谢

无插件

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 );
});

与@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>

我的建议是将所有子导航移出演示父导航。

我会将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结构更改为上面的结构后，您可以使用index（）在悬停时定位相关内容：

 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();

工作小提琴

相关文章：