JQUERY - каждый раз ссылайтесь на конкретный div

Question

В скрипке вы увидите в центре страницы DIV, который содержит текст рядом с img.

Когда я прокручиваю вниз/вверх, мне нужно выполнить с jquery/javascript только те, кто ближе всего к navbar-ниже. все дивы, как тот же класс, так что я осуществить их все-не то, что мне нужно

Например:

, что я пытаюсь достичь: когда я прокручиваю вниз, ближе дела до навигационной панели (желтый) будет окрашен (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, как вы можете видеть, что это работает только для первый, а затем застрял .. мне нужно «пропустить» его вдоль остальных ниже, когда они попадают в ту же точку. есть идеи? :

$(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/

Это просто быстрый взломать, чтобы найти элементы, основанные на расстоянии, и выбрать его. добавьте атрибут data-did для каждого элемента div.

$ (документ) .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' 
     }); 
    } 
}); 

});