我对在 CSS 中定位(例如相对、固定、绝对)还很陌生。我想要做的是在我的屏幕顶部创建一个固定的导航栏,当用户向下滚动内容时它会保留在那里。
这很容易通过将其定位为绝对、top:0、left:0 来完成。问题是,我有一个隐藏的联系人面板,当用户在导航菜单中单击“联系人”时,它会向下滑动。我希望导航栏随之向下移动,出现在联系面板下方。所以我不得不将导航从绝对位置更改为固定位置。这允许它向下移动到联系面板下方,但当您继续滚动时,导航栏仍位于窗口中间,而不是最顶部。
我这里有一些示例代码:http://jsfiddle.net/hwDwR/51/
总而言之,我希望绿色导航栏“粘附”到蓝色接触面板,直到导航栏到达窗口顶部。我希望导航栏始终显示在顶部(就像它在显示隐藏的 div 之前出现一样),即使在显示隐藏内容之后也是如此。
希望我能够解释我正在尝试做的事情。任何帮助将不胜感激!
**已解决:再次感谢您的回复,但这是我想要的效果:http://jsfiddle.net/hwDwR/66/ (将在 6 小时内作为答案发布)
最佳答案
请试试这个: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.
});
});
关于jquery - 隐藏的 div 将固定的 div 移动到窗口中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12468969/