好的,我一直在为自己创建一个视差滚动网站,但我不知道要制作固定的菜单栏。
我希望菜单栏出现在网站下方的 2/3 部分,并且当用户滚动经过该页面时,我希望它在向下滚动页面的其余部分时固定在页面顶部。抱歉,如果我的术语很糟糕,如果它有帮助,我希望菜单栏的功能与此网页上的完全一样。
所以基本上我不知道如何在 css 中做到这一点,所以如果有人可以提供帮助,那就太好了。
谢谢 :)
<div class="header"><strong>Header</strong></div>
<div class="nav"><strong>Navigation Bar</strong></div>
<div class="content"></div>
<style>
body{
margin: 0;
}
.header{
height: 50px;
background-color: #000;
font-size: 16px;
text-align: center;
color: #fff;
padding-top: 3%;
}
.nav{
height: 30px;
background-color: #D7D7D7;
font-size: 16px;
text-align: center;
color: #000;
padding-top: 5px;
width: 100%;
}
.content{
height: 1200px;
}
</style>
JS:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = 90;
if($(window).scrollTop() >= scrollTop){
$('.nav').css({
position : 'fixed',
top : '0'
});
}
if($(window).scrollTop() < scrollTop){
$('.nav').removeAttr('style');
}
})
})</script>