当一个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的方法来实现它？

- user3006683

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();
});

这里是演示Fiddle

使用缓存变量的演示

- Jai

Answer 2

使用jQuery，您可以检测页面何时被滚动，并在其滚动超过某个特定点后更新内容，如下所示：

<script type="text/javascript"> 
$(document).ready(function(){
    $(document).scroll(function(){
        var doc = document.documentElement, body = document.body;
        var top = (doc && doc.scrollTop || body && body.scrollTop || 0);

        if(top > 100)
        {
            // Page has been scrolled past 100 pixels; add border here
        }
        else
        {
            // Page has not been scrolled past 100 pixels; remove border here
        }
    });
});
</script>

使用jQuery对固定的分隔符应用CSS规则，可以使用.css()函数，并以相同的方式将其删除。代码示例如下：

$('.header').css('border-bottom', '2px solid #F00'); // Add border
$('.header').css('border-bottom', 'none'); // Remove

- Wes Cossick