如何让MUI Popper在导航栏滚动隐藏后仍保持屏幕可见？

核心问题是Popper默认依附于导航栏按钮（锚点元素），当导航栏滚动隐藏时，锚点元素的位置变化或被隐藏，Popper自然跟着消失。要让Popper保持可见，得切断它和锚点元素的滚动关联，改用视口固定定位：

具体方案 #

• 把Popper的定位策略改成fixed，让它基于浏览器视口定位，不再跟着父容器（导航栏）滚动。
• 开启keepMounted确保Popper在打开状态下始终挂载，不会因为锚点元素隐藏而被卸载。
• 调整修饰符，配合滚动监听手动修正位置，避免Popper溢出视口。

代码示例 #

import { Popper } from '@mui/material';
import { useState, useRef, useEffect } from 'react';

function ChatBot() {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef(null);
  const popperRef = useRef(null);

  return (
    <>
      {/* 导航栏里的触发按钮 */}
      <button ref={anchorRef} onClick={() => setOpen(!open)}>
        打开聊天机器人
      </button>

      <Popper
        open={open}
        anchorEl={anchorRef.current}
        placement="bottom"
        strategy="fixed" // 关键：固定定位，脱离导航栏的滚动上下文
        keepMounted={true} // 确保Popper始终挂载，即使锚点隐藏
        modifiers={[
          {
            name: 'preventOverflow',
            options: {
              rootBoundary: 'viewport', // 以视口为边界防止溢出
              padding: 8,
            },
          },
          {
            name: 'flip',
            options: {
              fallbackPlacements: ['top', 'right', 'left'], // 位置不够时自动切换
            },
          },
        ]}
      >
        <div ref={popperRef} style={{ background: '#fff', padding: '16px', border: '1px solid #eee', borderRadius: '4px' }}>
          {/* 聊天机器人内容 */}
          <div>这是聊天机器人窗口</div>
        </div>
      </Popper>
    </>
  );
}

额外优化（可选） #

如果导航栏隐藏时，Popper的位置需要微调，可以监听滚动事件手动修正：

useEffect(() => {
  const handleScroll = () => {
    if (!open || !popperRef.current || !anchorRef.current) return;
    
    // 假设导航栏隐藏时会加一个.hidden类
    const navbarIsHidden = document.querySelector('.navbar').classList.contains('hidden');
    if (navbarIsHidden) {
      const anchorRect = anchorRef.current.getBoundingClientRect();
      // 手动设置Popper位置，保持和原锚点的相对位置
      popperRef.current.style.top = `${anchorRect.bottom + 8}px`;
      popperRef.current.style.left = `${anchorRect.left}px`;
    }
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, [open]);

之前用preventOverflow没用的原因：这个修饰符只是防止Popper溢出指定边界，但Popper仍然是锚定在导航栏按钮上的，当导航栏被隐藏，锚点元素的位置失效，Popper自然跟着消失。改用fixed策略才是解决核心问题的关键。

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