Jquery, найдите имя класса div в определенной позиции при прокрутке

Фиксированный div (fixed_div) остается наверху, чтобы отобразить в нем карту Google. Затем над ним остается большой div (big_div). У большого div есть внутри него много маленьких div с классом small_div. Каждый маленький div имеет id small_div_n, где n = 0,1,2,3.. последовательно. Большой div прокручивается под фиксированным div.

HTML:

<div class="fixed_div" >
</div><!-- end of class fixed_div -->

<div class="big_div">
    <div class="small_div" id="small_div_0">
    </div><!--end of class small_div -->
    <div class="small_div" id="small_div_1">
    </div><!--end of class small_div -->
    <div class="small_div" id="small_div_2">
    </div><!--end of class small_div -->
</div><!--end of class big_div -->

CSS

.fixed_div {
  position:fixed;
  height:100px;
}

.big_div {
  padding-top:100px;
}

.small_div {
  min-height:80px;
}

Малые divs имеют свойство переменной высоты.

Если я могу узнать, что новый small_div достиг нижней части фиксированного div, я могу найти соответствующий id для маленького div и понять, какая карта google должна отображаться в фиксированном div через вызов ajax.

Как понять, что новый small_div достиг нижней части фиксированного div?

EDIT: большой div имеет свойство min-height.

Ответы

Ответ 1

<script>
(function() {
    var fixed = $('div.fixed_div');
    $(window).on('scroll',function() {
    var currentFixedDivPosition = fixed.position().top + fixed.height() + $(window).scrollTop();
    var temp, whichOne;
        $('div.small_div').each(function(i,s) {
        var diff = Math.abs($(s).position().top - currentFixedDivPosition);
            if(temp) {
                    if(diff < temp) {
                        temp = diff;
                        whichOne = s;
                    }
            }else {
                temp = diff;
                whichOne = s;
            }           
        });
        console.log(temp, $(whichOne).attr('id') + ' was closest');
    });
})();
</script>

Вот скрипка: http://jsfiddle.net/s3JKk/, я не уверен, что правильно понял, что вы хотели, но я надеюсь, что это будет по крайней мере дайте вам немного начать.:) Удачи!

Ответ 2

Надеюсь, что следующий код отвечает цели,

  1. Я добавил код для динамического добавления небольшого элемента DIV к элементу big_div
  2. Затем я добавил прослушиватель событий, который обнаруживает новые записи в big_div

// the system will append a new DIV when the button is clicked
document.getElementById("add").addEventListener("click", function(){
  addDiv();
});

// an event listener which listenes to any new added element to big_div
$('#big_div').on('DOMNodeInserted', function(e) {
    // here I am getting the id of the last added element
    var newdivid = document.getElementById("big_div").lastChild.id;
    document.getElementById("div_status").innerHTML = "new small div added, id: " + newdivid;    
});

function addDiv() {
  var smalldiv = document.createElement("div");
  // here I am setting the id of the newly created DIV to any random string
  smalldiv.setAttribute("id", Math.random().toString(36).slice(-5));
  smalldiv.appendChild(document.createTextNode("small div"));
  document.getElementById("big_div").appendChild(smalldiv);
}
.fixed_div {
  position:fixed;
  height:100px;
}

.big_div {
  padding-top:100px;
}

.small_div {
  min-height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed_div" >
  fixed div
  <p id="div_status">No Status</p>
</div><!-- end of class fixed_div -->

<div class="big_div" id="big_div">
    <div class="small_div" id="small_div_0">
      div 0
    </div><!--end of class small_div -->
</div><!--end of class big_div -->  
<button type="button" id="add">Add Small DIV</button>