jquery，在滚动时在某个位置找到div类名 [英] jquery, find div class name at a certain position while scrolling

问题描述

固定的div（ fixed_div ）会保留在顶部，以在其中显示Google地图。然后一个大的div（ big_div ）留在它下面。大div里面有很多小div，类 small_div 。每个小div都有一个id small_div_n ，其中n = 0,1,2,3 ..连续。大div在固定div下方滚动。

A fixed div (fixed_div) stays at the top to display a Google map inside it. Then a big div (big_div) stays beneath it. The big div has inside it many small divs with class small_div. Each small div has an id small_div_n where n=0,1,2,3.. consecutively. The big div is scrolled beneath the fixed 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 divs have a variable height property.

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

If I am able to know that a new small_div has reached the lower part of the fixed div , I can find the corresponding id of the small div and can understand which google map is to be shown in the fixed div through an ajax call.

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

How to sense that a new small_div has reached the lower part of the fixed div?

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

EDIT: the big div has a min-height property.

推荐答案

<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/ ，我不确定我是否理解你想要的东西，但我希望这至少能给你一些启动。 :)祝你好运！

Here is a fiddle : http://jsfiddle.net/s3JKk/ , I'm not sure I understood correctly what you wanted, but I hope this will at least give you some start. :) Good Luck!

这篇关于jquery，在滚动时在某个位置找到div类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！