jquery - 当一个 div 接触另一个 div 时显示边框颜色

Question

我有两个 div，一个固定在顶部，我想在第二个 div 触及它时显示固定 div 的边框颜色。我想要就像雅虎所做的那样。

这是...

<div class="container">
<div class="header"></div>
<div class="content"></div>
</div>

.containter{
 width:700px;
 margin:0 auto;
 }
.header{
 height:50px;
 width:100%;
 position:fixed;
 top:0;
 left:0;
 background:yellow;
 }

 .content{
 min-height:500px
 width:100%;
 background:red;
 }

有什么方法可以使用 css 或 jquery 来实现吗？

Answer 1

您可以使用 jQuery 来获得此效果:

假设这是您的类，它在窗口滚动时显示阴影。

.shadow{
    box-shadow: 0px 3px 5px #888888;
}

然后在窗口的滚动条大于 0 时添加 jQuery。

$(function(){
    var $window = $(window),
        $header = $('.header'),
        $this   = $(this); // <-----here you can cache your selectors

    $window.on('scroll', function(){
       if($this.scrollTop() > 0){
           $header.addClass('shadow');
       }else{
           $header.removeClass('shadow');
       }
    }).scroll();
});

Demo Fiddle here

Demo with cached vars