2

固定の div ( fixed_div) は上部にとどまり、その中に Google マップを表示します。次に、大きな div ( big_div) がその下にとどまります。大きな div の内部には、 class を持つ多くの小さな div がありsmall_divます。各小さな div には、small_div_nn=0、1、2、3.. が連続する ID があります。大きな 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 を見つけることができ、固定 div にどの Google マップを表示するかを ajax 呼び出しで理解できます。

small_div新しいが固定divの下部に到達したことをどのように感知するのですか?

EDIT : 大きな div にはmin-heightプロパティがあります。

4

2 に答える 2

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/ 、あなたが何を望んでいたかを正しく理解できたかどうかはわかりませんが、これが少なくともあなたにいくつかのスタートを切ることを願っています. ：） 幸運を！

于 2013-12-18T09:16:07.010 に答える