3

我对 css 中的定位非常陌生（例如相对、固定、绝对）。我想要做的是在我的屏幕顶部创建一个固定的导航栏，当用户向下滚动内容时它会保留在那里。

这很容易通过将其定位为绝对、top:0、left:0 来完成。问题是，当用户单击导航菜单中的“联系人”时，我有一个隐藏的联系人面板会向下滑动。我希望导航栏随之向下移动，出现在联系面板下方。所以我不得不将导航从绝对位置更改为固定位置。这允许它向下移动到联系人面板下方，但是当您继续滚动时，导航栏仍保留在窗口的中间，而不是在最顶部。

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

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

希望我能够解释我正在尝试做的事情。任何帮助将不胜感激！

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

4

4 回答 4

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.
  });
});
于 2012-09-18T01:01:58.793 回答
0

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

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

并添加position: fixed到.panel

于 2012-09-18T01:34:24.993 回答
0

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

将 'nav' 和 'panel' 包裹在一个 div 中并对其应用固定定位。

于 2012-09-18T01:40:34.830 回答
0

这是我追求的效果：http: //jsfiddle.net/hwDwR/66/

再次感谢您的回复，我已经为此困惑了一两天。

于 2012-09-19T01:27:41.260 回答