当一个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;
}

然后在窗口的scrolltop大于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

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>

使用.css()函数将jss规则应用于使用jQuery的固定分隔符，并以相同的方式将其删除。这可能类似于：

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