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

固定div( fixed_div )停留在顶部以在其中显示Google地图。 然后一个大div( big_div )停留在它下面。 大div里面有许多small_div类的小div。 每个小small_div_n都有一个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的下半部分,我可以找到小div的相应id ,并且可以通过ajax调用了解哪个谷歌地图将在固定div中显示。

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

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


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

链接地址: http://www.djcxy.com/p/47897.html

上一篇: jquery, find div class name at a certain position while scrolling

下一篇: Return HTML in PHP JSON response