如何添加类似于 Yahoo! 的边框当你滚动页面? 我想要 .has-border 到 nav 元素。
Jsfiddle.net:http://jsfiddle.net/hvz22/
HTML
<nav>
</nav>
<main>
<div id="content">
<p>Something</p>
<p>Something</p>
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</main>
CSS
nav{
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
height:50px;
}
main{
width:1200px;
left:auto;
right:auto;
background:lightgray;
height:2000px;
min-height:100%;
}
.has-border{
border-bottom:1px solid black;
}
最佳答案
您可以通过将滚动事件附加到窗口并检查滚动位置来实现此目的。
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() > 0){
jQuery('nav').addClass('border');
}
else{
jQuery('nav').removeClass('border');
}
});
举个例子:
关于javascript - 如何添加类似于 Yahoo! 的底部边框当你滚动页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22684620/