javascript - JQUERY-每次引用特定的div

Question

在 fiddle 中，您将在页面中心看到一个 DIV，其中包含图像旁边的文本。

当我向下/向上滚动时，我只需要使用 jquery/javascript 来影响最接近下方导航栏的 div。所有的 div 都是同一个类，所以我影响它们全部 - 不是我需要的

例如:

我想要实现的目标:当我向下滚动时，距离导航栏(黄色栏)最近的 div 将被漆成(div)绿色，所以如果我向下滚动并且导航栏将与 div 一起“折叠”涂成绿色，当他经过他并“消失”时，它会回到原来的颜色，下一个 div 会涂成绿色。这可能吗？

这是 JS FIDDLE:http://jsfiddle.net/nnkekjsy/3/

当我提到 div 时，我指的是这一部分:

<div class="x" id="inside_center">
    <div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
    <div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>

JQUERY:

我添加了我的jquery，正如你所看到的，它只适用于第一个，然后卡住了..当到达同一点时，我需要将它沿着他下面的其他div“传递”。有任何想法吗？ :

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
       var navHeight = $("#div_menu").outerHeight();
        if ( scrollVal > 55) {
            $('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
        } else {
            $('#left_inside_center').css({'position':'static','top':'auto'});
        }
    });
 });

Answer 1

你在寻找这样的东西吗？ http://jsfiddle.net/mcozkpv3/1/

这只是根据距离查找闭合元素并选择它的快速技巧。为每个 item div 添加 data-did 属性。

$(文档).ready(函数(){

$(window).scroll(function () {

    $('[data-did]').each(function (i, e) {
        var dist = $(e).offset().top - $('#div_menu').offset().top
        if (dist < 80) {
            $(e).addClass('closest');
        } else {
            $(e).removeClass('closest');
        }

    });


    var scrollVal = $(this).scrollTop();
    var navHeight = $("#div_menu").outerHeight();
    if (scrollVal > 55) {
        //   $('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
    } else {
        $('#left_inside_center').css({
            'position': 'static',
            'top': 'auto'
        });
    }
});

});