在可滾動容器中定位絕對下拉列表

Question

是否可以使位置絕對下拉列表保持在可滾動容器的頂部，並在滾動時與位置相對父項一起移動？ 現在，下拉列表出現在可滾動區域內。

下面的截圖是我想要實現的。 如果需要，我也對javascript解決方案持開放態度。

的jsfiddle

 .navbar { padding-left: 0; white-space: nowrap; overflow: auto; } .navbar-item { position: relative; margin-left: 0; list-style: none; display: inline-block; width: 200px; text-align: center; border: 1px solid; } .dropdown { position: absolute; padding-left: 0; width: 200px; box-shadow: 0 1px 0 1px black; display: none; } .dropdown-item { margin-left: 0; list-style: none; } .navbar-item:hover .dropdown { display: block; } 

 <ul class="navbar"> <li class="navbar-item"> <a>Item A</a> <ul class="dropdown"> <li class="dropdown-item">Sub Item A</li> <li class="dropdown-item">Sub Item B</li> <li class="dropdown-item">Sub Item C</li> </ul> </li> <li class="navbar-item"><a>Item B</a></li> <li class="navbar-item"><a>Item C</a></li> <li class="navbar-item"><a>Item D</a></li> <li class="navbar-item"><a>Item E</a></li> </ul> 

Answer 1

一種簡單的方法是使下拉列表的位置固定，但請確保相應地應用左側和頂部值。 另一種方法是將下拉菜單附加到ul元素之外，因此當它出現時它不會被包裹在其中。

.dropdown {
  position: fixed;
}

 .navbar { padding-left: 0; white-space: nowrap; overflow: auto; } .navbar-item { position: relative; margin-left: 0; list-style: none; display: inline-block; width: 200px; text-align: center; border: 1px solid; } .dropdown { position: fixed; background-color: #fff; padding-left: 0; width: 200px; box-shadow: 0 1px 0 1px black; display: none; } .navbar-item { margin-left: 0; list-style: none; } .navbar-item:hover .dropdown { display: block; } 

 <ul class="navbar"> <li class="navbar-item"> <a>Item A</a> <ul class="dropdown"> <li class="dropdown-item">Sub Item A</li> <li class="dropdown-item">Sub Item B</li> <li class="dropdown-item">Sub Item C</li> </ul> </li> <li class="navbar-item"><a>Item B</a></li> <li class="navbar-item"><a>Item C</a></li> <li class="navbar-item"><a>Item D</a></li> <li class="navbar-item"><a>Item E</a></li> </ul> 

編輯

我添加了一個不使用固定位置的片段。 它根據父偏移量在打開時更改其坐標。

 $('#menu1, #submenu1').mouseover(function(event) { $('#submenu1').addClass("show").css($('#menu1').offset()); }); $('#menu1, #submenu1').mouseleave(function(event) { $('#submenu1').removeClass("show"); }); 

 .navbar { padding-left: 0; white-space: nowrap; overflow: auto; } .navbar-item { position: relative; margin-left: 0; list-style: none; display: inline-block; width: 200px; text-align: center; border: 1px solid; } .dropdown { position: absolute; padding-left: 0; width: 200px; box-shadow: 0 1px 0 1px black; display: none; } .dropdown.show { display: block; margin-left: 1px; background-color: #fff; } .dropdown-item { margin-left: 0; list-style: none; } .navbar-item:hover .dropdown { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="navbar"> <li id="menu1" class="navbar-item"> <a>Item A</a> </li> <li class="navbar-item"><a>Item B</a></li> <li class="navbar-item"><a>Item C</a></li> <li class="navbar-item"><a>Item D</a></li> <li class="navbar-item"><a>Item E</a></li> </ul> <ul id="submenu1" class="dropdown"> <li class="dropdown-item">Sub Item A</li> <li class="dropdown-item">Sub Item B</li> <li class="dropdown-item">Sub Item C</li> </ul> 

Answer 2

這是使用jQuery的選項。

基本上，正如其他人所提到的，你必須將subnav項目移動到主導航包裝器之外，這樣它們就不會被隱藏。

我們可以將它們放在與主導航包裝器具有類似標記的自己的包裝器中，然后使用數據元素將它們匹配以允許在單擊時顯示/隱藏它們。

然后，當我們滾動主導航欄時，我們可以將subnav包裝器同步到該元素的滾動位置，因此subnav項似乎固定為主導航項。

最后，我們可以使用CSS隱藏subnav包裝器的滾動條。

下面的代碼段可以為您提供一般概念，然后您可以根據需要設置樣式，使其看起來更像主要和輔助導航項目的連接。

單擊主導航中的導航項，然后滾動到側面以查看其中的操作：

 $(function(){ var navbar = $('.navbar'); var subnavBar = $('.subnavs-wrapper .scrollbar-hider'); $(navbar).find('li').each(function(){ var dataId = $(this).attr('data-id'); var matchingUl = $(this).parent().next().find('ul[data-id="' + dataId + '"]'); $(this).on('click', function(){ $(matchingUl).css('visibility') == 'hidden' ? $(matchingUl).css('visibility', 'visible') : $(matchingUl).css('visibility', 'hidden'); }); $(navbar).on('scroll', function(){ $(subnavBar).scrollLeft($(this).scrollLeft()); }); }); }); 

 .navbar { padding-left: 0; white-space: nowrap; overflow: auto; display: flex; } .navbar-item { position: relative; margin-left: 0; list-style: none; flex-shrink: 0; width: 200px; text-align: center; border: 1px solid; } .dropdown { position: absolute; padding-left: 0; width: 200px; box-shadow: 0 1px 0 1px black; display: none; } .navbar-item { margin-left: 0; list-style: none; } .navbar-item:hover .dropdown { display: block; } .subnavs-wrapper { overflow: hidden; /* hide scrollbar */ } .subnavs-wrapper .scrollbar-hider { display: flex; overflow: auto; padding-bottom: 50px; /* hide scrollbar */ margin-bottom: -50px; /* hide scrollbar */ } .subnav { width: 200px; padding-left: 0; list-style: none; visibility: hidden; flex-shrink: 0; border: 1px solid black; } 

 <ul class="navbar"> <li class="navbar-item" data-id="one"><a>Item A</a> <li class="navbar-item" data-id="two"><a>Item B</a></li> <li class="navbar-item" data-id="three"><a>Item C</a></li> <li class="navbar-item" data-id="four"><a>Item D</a></li> <li class="navbar-item" data-id="five"><a>Item E</a></li> </ul> <div class="subnavs-wrapper"> <div class="scrollbar-hider"> <ul class="subnav" data-id="one"> <li>Sub Item AA</li> <li>Sub Item AB</li> <li>Sub Item AC</li> </ul> <ul class="subnav" data-id="two"> <li><a>Sub Item BA</a></li> </ul> <ul class="subnav" data-id="three"> <li><a>Sub Item CA</a></li> <li><a>Sub Item CB</a></li> </ul> <ul class="subnav" data-id="four"> <li><a>Sub Item DA</a></li> <li><a>Sub Item DB</a></li> </ul> <ul class="subnav" data-id="five"> <li><a>Sub Item EA</a></li> <li><a>Sub Item EB</a></li> </ul> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>