jquery, find div class name at a certain position while scrolling
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;
}
Small divs have a variable height property.
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.
How to sense that a new small_div has reached the lower part of the fixed div?
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>
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!
链接地址: http://www.djcxy.com/p/47898.html上一篇: 服务器端或客户端