jquery, find div class name at a certain position while scrolling

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

Hope that following code fulfills the purpose,

I have added a code to dynamically append a small DIV element to a big_div element
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>

jquery, find div class name at a certain position while scrolling

Related

Recent Posts