左侧面板滚动时书签按钮需固定，全屏滚动时不固定的布局问题

核心需求明确：

• 滚动全屏（红色滚动条）：菜单栏固定不动，书签按钮随左侧面板整体移动
• 滚动左侧面板（蓝色滚动条）：菜单栏保持固定，书签按钮固定在左侧面板内的顶部位置

当前问题是用absolute无法实现左侧滚动时的固定效果，直接用sticky没生效是因为没配置好定位上下文。调整代码如下：

<body>
  <div class="flex">
    <!-- 左侧面板 -->
    <div class="relative h-[100vh] w-[50%] overflow-x-hidden overflow-y-scroll scrollbar">
      <!-- 菜单栏：保持fixed，全屏滚动时固定在视口 -->
      <div class="fixed bottom-0 top-0">Menu-bar</div>
      
      <!-- 书签容器：设置sticky，相对于左侧滚动容器定位 -->
      <div class="sticky top-2 right-2 z-20 flex justify-end">
        <button type="button">Bookmark</button>
      </div>
      
      <!-- 左侧内容：加padding避免被书签遮挡 -->
      <div class="pt-10">
        <p>Some text, some text, some text, some text</p>
        <!-- 可添加更多长文本测试滚动效果 -->
      </div>
    </div>
    
    <!-- 右侧面板 -->
    <div class="h-[100vh] w-[50%] overflow-x-hidden overflow-y-scroll scrollbar">
      <SectionTwo />
    </div>
  </div>
  <div>Footer, Footer, Footer, Footer, Footer, Footer, Footer</div>
</body>

关键调整：

1. 给书签套一个sticky top-2 right-2的容器，父容器是relative的左侧面板，这样sticky会基于左侧滚动容器生效，滚动左侧面板时书签固定在顶部位置。
2. 左侧内容加pt-10（数值可按需调整），防止内容被固定的书签挡住。
3. 菜单栏保留fixed属性，确保全屏滚动时始终固定在视口左侧。

原理：
左侧面板是独立滚动容器，滚动它时sticky元素触发固定；全屏滚动时，左侧面板作为整体随页面移动，书签的sticky是相对于左侧容器的，所以会跟着面板一起移动，不会固定在视口顶部，完全符合需求。

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