javascript - 下拉位置问题

Question

因此，我使用这段代码在 div 顶部而非内部显示下拉菜单。问题是，当我滚动页面时，下拉 block 固定在打开的位置。

有没有办法让block保持在div之上，但是在滚动页面的时候让它移动？

感谢您的帮助!

JSFiddle example

(function() {
  var dropdownMenu;
  $(window).on('show.bs.dropdown', function(e) {   
    var topValue = e.relatedTarget.getBoundingClientRect().y
    var leftValue = e.relatedTarget.getBoundingClientRect().x
    dropdownMenu = $(e.target).find('.dropdown-menu');
    //$('#dv').append(dropdownMenu.detach());          
    dropdownMenu.css('display', 'block');
    dropdownMenu.css('position', 'fixed');    
    dropdownMenu.css('top', topValue + 30);    
    dropdownMenu.css('left', leftValue - 120);    
    dropdownMenu.css('right', 'auto');  
  });                                                   
  $(window).on('hide.bs.dropdown', function(e) {        
   // $(e.target).append(dropdownMenu.detach());        
    dropdownMenu.hide();                              
  });                                                   
})();

Answer 1

只需将您的位置更改为绝对位置并删除左上角和右上角属性。具有 position: absolute; 的元素；相对于最近定位的祖先定位(而不是相对于视口(viewport)定位，如固定)

add    dropdownMenu.css('position', 'absolute');

remove dropdownMenu.css('position', 'fixed');
remove dropdownMenu.css('top', topValue + 30);    
remove dropdownMenu.css('left', leftValue - 120);    
remove dropdownMenu.css('right', 'auto');