CODEWITHSUNDEEP
javascriptjquery
Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

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.

Upvotes: 2

Views: 4752

Answers (2)

Rahul Vala
Rahul Vala

Reputation: 715

Hope that following code fulfills the purpose,

  1. I have added a code to dynamically append a small DIV element to a big_div element
  2. Then I added an event listener which detects any new entries to 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>

Upvotes: 1

Holybreath
Holybreath

Reputation: 413

<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!

Upvotes: 1

Related Questions