如何添加类似于Yahoo!的边框底部当你滚动页面？

Question

如何添加类似于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;
}

Answer 1

您可以通过将滚动事件附加到窗口并检查滚动位置来实现此目的。

    jQuery(window).scroll(function(){
       if(jQuery(window).scrollTop() > 0){
          jQuery('nav').addClass('border');
       }
       else{
          jQuery('nav').removeClass('border');
       }
    });

以下是一个例子：

http://jsfiddle.net/hvz22/14/