Dropdown定位问题：页面滚动时下拉菜单无法随目标元素移动

我懂你遇到的麻烦了——你想让下拉菜单显示在目标div上方，但用了fixed定位后，页面滚动时菜单就钉在初始位置不动了。这是因为fixed定位是相对于浏览器视口的，和页面滚动的内容完全脱节。

给你个实用的解决方案：我们可以监听页面滚动事件，每次滚动时重新计算目标元素的实时位置，同步更新下拉菜单的坐标。这样既能保持菜单在div上方的布局，又能让它跟着页面一起滚动。

修改后的代码如下：

(function() {
  var dropdownMenu;
  var targetElement; // 保存触发下拉的元素引用

  $(window).on('show.bs.dropdown', function(e) {
    targetElement = e.relatedTarget;
    dropdownMenu = $(e.target).find('.dropdown-menu');
    
    // 初始化菜单位置
    updateDropdownPos();
    
    dropdownMenu.css({
      'display': 'block',
      'position': 'fixed',
      'right': 'auto'
    });
    
    // 添加滚动监听，实时更新位置
    $(window).on('scroll.dropdown', updateDropdownPos);
  });

  $(window).on('hide.bs.dropdown', function(e) {
    dropdownMenu.hide();
    // 移除滚动监听，避免冗余计算和内存泄漏
    $(window).off('scroll.dropdown');
    targetElement = null;
  });

  // 封装位置更新逻辑
  function updateDropdownPos() {
    if (!targetElement || !dropdownMenu) return;
    var elementRect = targetElement.getBoundingClientRect();
    dropdownMenu.css({
      'top': elementRect.y + 30,
      'left': elementRect.x - 120
    });
  }
})();

代码说明： #

• 新增targetElement保存触发下拉的元素，方便滚动时重新获取它的视口位置
• 把位置计算逻辑抽成updateDropdownPos函数，初始化显示和滚动时都会调用它
• 显示下拉时绑定滚动事件，隐藏时解绑，避免页面滚动时一直执行不必要的计算
• 每次滚动时，通过getBoundingClientRect()重新获取目标元素的实时位置，更新菜单的top和left值，让菜单跟着目标元素同步移动

另外还有一种备选思路：如果你的布局允许，可以把目标元素的父容器设置为position: relative，然后把下拉菜单改成position: absolute定位，这样菜单会相对于父容器定位，页面滚动时自然会跟着走。不过这种方式可能受限于父容器的范围，如果需要菜单跳出父容器显示，还是上面的滚动监听方案更灵活。

内容的提问来源于stack exchange，提问作者Tiago Alves