Question

我很擅长在css中定位（例如，相对，固定，绝对）。我要做的是在用户向下滚动内容时在屏幕顶部创建一个固定的导航栏。

通过将其定位为绝对值，top：0，left：0，可以轻松完成此操作。问题是，当用户点击导航菜单中的“联系人”时，我有一个隐藏的联系人面板向下滑动。我希望导航栏随之移动，显示在联系人面板下方。所以我不得不将导航从绝对位置更改为固定位置。这允许它向下移动到接触面板下方，但是当您继续滚动时，导航栏将保留在窗口的中间，而不是在最顶部。

我在这里有一些示例代码：http://jsfiddle.net/hwDwR/51/

总而言之，我希望绿色导航栏“粘贴”到蓝色接触面板，直到导航栏到达窗口顶部。我希望导航栏始终显示在顶部（就像显示隐藏的div之前一样），即使在显示隐藏的内容之后也是如此。

希望我已经能够解释我正在尝试做什么。任何帮助将不胜感激！

**已解决：再次感谢您的回复，但这是我的目标：http://jsfiddle.net/hwDwR/66/（将在6小时后发布回答）

Answer 1

请试试：http://jsfiddle.net/z2LVR/

它的行为原因是因为内容div位于固定div

之上

希望它适合原因:)

代码

 <div id="nav">
     my | nav | bar | contact (click me)
 </div>
  <div class="panel">
  Contact information to slide down (and stay down).
 </div>




$(document).ready(function(){
  $("#nav").click(function(){
    $(".panel").slideDown("slow"); // you can use slideToggle if you want. Just a suggestion.
  });
});

Answer 2

将此行添加到click处理程序：

$("#nav").animate({'top':'200px'},'slow');

并将position: fixed添加到.panel

Answer 3

http://jsfiddle.net/jklm313/hwDwR/57/

将div中的'nav'和'panel'包裹起来并将固定定位应用于它。

隐藏的div将固定的div移动到窗口的中间

3 个答案: