jquery，滚动时在某个位置找到div类名答案

【问题标题】：jquery, find div class name at a certain position while scrollingjquery，滚动时在某个位置找到div类名
【发布时间】：2012-10-19 16:46:08
【问题描述】：

一个固定的 div (fixed_div) 保持在顶部以在其中显示 Google 地图。然后一个大 div (big_div) 留在它下面。大 div 里面有许多类 small_div 的小 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;
}

小 div 具有可变的高度属性。

如果我能知道一个新的small_div已经到了固定div的下半部分，我就可以找到小div对应的id，就可以知道要在固定div中显示哪个google map了div 通过 ajax 调用。

如何感知一个新的small_div已经到达固定div的下部？

编辑：大 div 有一个 min-height 属性。

【问题讨论】：

为什么不检查控制台并从那里找到元素？
哪个元素？如何以及何时在控制台中记录任何内容？
@IstiaqueAhmed - 如果您想更多地关注您的问题，请提供奖金。在不相关的问题上留下“请帮助我”不会让你得到正确的关注。
@StephenC，你的意思是提供赏金？
@IstiaqueAhmed - 是的，我是这个意思。（反正我不会回答...... jquery 不是我的专业领域。但这就是赏金的全部意义......吸引真正的专家！）

标签： javascript jquery

【解决方案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】：

希望下面的代码能达到目的，

我添加了一个代码来动态地将一个小的 DIV 元素附加到一个 big_div 元素
然后我添加了一个事件监听器，它可以检测到 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>

【讨论】：