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

IT技术 javascript jquery
2021-01-30 19:37:04

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

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

如果我能够知道一个新的small_div到达了固定div的下部，我可以找到id小div的对应，并且可以通过ajax调用了解在固定div中显示哪个谷歌地图。

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

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

2个回答
<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/ ，我不确定我是否正确理解了你想要什么，但我希望这至少能给你一些开始。：） 祝你好运！

希望以下代码可以达到目的，

  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>

其它你可能感兴趣的问题
上一篇如何使用无效字符访问对象属性 下一篇循环中的动态变量名