html - 允许元素出现在滚动条上

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