允许元素出现在滚动条上

Question

我正在尝试构建一个鼠标悬停在元素上时出现的菜单。但是，这很好用，对于底部行，悬停在滚动条中消失了。

HTML

<div style="width:1024px; height:50px; overflow:scroll; border: 1px solid red;">
        <div class="dropdown">
            <span style="margin-left:5px" class="checkboxlink ignore"></span>

            <ul>
            <li><a href="#"><span class="checkboxlink todo"></span>Te doen</a></li>
            <li><a href="#"><span class="checkboxlink done"></span>Behandeld</a></li>
            <li><a href="#"><span class="checkboxlink ignore"></span>Negeren</a></li>
            <li><a href="#"><span class="checkboxlink park"></span>Parkeren</a></li>
            </ul>
        </div>
        .... more divs

CSS

.dropdown{
    position: relative;
    display: inline-block;
    font-size: 16px;
    width: 40px;
    border: 0px solid white;
    vertical-align: top;

}

.dropdown:hover
{
border: 0px solid #ccc;

}

ul{
    position: absolute;
    list-style: none;
    text-align: left;
    z-index: 1;
    margin:0;
    padding:0;
    display: none;
    background-color: white;
    border: 1px solid #ccc;
}
.dropdown:hover ul {
    display: block;
}

参见此处：

https://jsfiddle.net/w030L59t/

我尝试过绝对定位，但元素仍然停留在可滚动区域中。

Answer 1

问题在于下拉父级的任何position: relative 属性。如果您删除它们，您可以轻松地将 position: absolute 添加到下拉列表中，以将其显示在可滚动框上方：

JSFIDDLE DEMO

删除position: relative 的问题是每个下拉菜单的位置在页面加载时计算一次。虽然下拉菜单在不滚动的情况下效果很好，但您会在演示中注意到，每个下拉菜单都不会刷新其位置。

---

这可以使用几行 javascript 来解决，在滚动后计算每个父级的 .offset.top，并使用 top: <offset.top of its parent> 更新下拉列表位置。我添加了 .list_item 和 ul.dropdown_list 类，虽然 ID 为 #wrapper。

$(document).ready(function() {

    // fire function everytime the wrapper is scrolled
    $('#wrapper').scroll(function(){

    // set element to relate to
    var list_items = $('div.list_item');

    // get each position
    list_items.each(function() {

      // store offset().top inside var
      var list_item_position = $(this).offset().top;

      // select previous dropdown_list item
      $(this).prev().find('ul.dropdown_list').css({

        // apply offset top
        top: list_item_position + "px"

      });
    });

    // write to console to track changes
    console.log('positions updated');

  }); // .scroll

}); // document.ready

JSFIDDLE DEMO WITH jQUERY