CODEWITHSUNDEEP
javascriptjqueryajax
Opsional
Opsional

Reputation: 543

Fire AJAX jQuery if scroll reach to each div

I want make ajax fire if scroll reach to each div element.

I use this code, but only fire if scroll to end.

$( window ).scroll( function() {
    	if( $( window ).scrollTop() == $( document ).height() - $( window ).height() ) {
    		alert('Fire!');
    	}
    });

Please help.

Upvotes: 0

Views: 2233

Answers (3)

Jasper Seinhorst
Jasper Seinhorst

Reputation: 1074

$(window).scroll( function() {
    var scrolled = $( window ).scrollTop();

    $('div:not(.fired)').each(function () {
        var position_of_div = $(this).offset();
        if (scrolled > position_of_div.top) {
            $(this).addClass('fired');
            alert('fire');
        }
    });
});

Save the scrolled pixels in an variable. On scroll get the position of each div. If the amount of pixels scrolled is greater than the offset of the div (related to the document) fire a AJAX call.

Upvotes: 0

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

I took the liberty of writing a simple html that will fullfil your needs. In my example scroll happens via button click; u can change it with your usecase; Hope this helps; here's the fiddle https://jsfiddle.net/39z82axt/

html

<div id="wrapper">
<div class="divel">Element 1</div>
<div class="divel">Element 2</div>
<div class="divel">Element 3</div>
<div class="divel">Element 4</div>
<div class="divel">Element 5</div>
</div>
<button id="scrollButton">
Click to Scroll
</button>

css

 .divel {
  height:80px;
}
#wrapper {
  height: 100px;
  overflow:scroll;
}

js

let crossedFirstDiv = false, 
    crossedSecondDiv = false;

document.getElementById('scrollButton').onclick = function() {
   document.getElementById("wrapper").scrollTop += 10;   
   let scrollLocation = scrollPosition("wrapper");
   if (scrollLocation > 10 && scrollLocation <20 && crossedFirstDiv == false) {
   alert("crossing div 1");
   crossedFirstDiv = true;
   }
   else if (scrollLocation > 20 && scrollLocation <30 && crossedSecondDiv == false) {
   crossedSecondDiv = true;
   alert("crossing div 2");
   }   

   // and so on..
}

function scrollPosition(elementId) {
  let a = document.getElementById(elementId).scrollTop; 
   let b = document.getElementById(elementId).scrollHeight - document.getElementById(elementId).clientHeight;
   let c = a / b;
   return Math.floor(c * 100);
}

Upvotes: 0

SourceOverflow
SourceOverflow

Reputation: 2048

Use $.offset().top instead of heights.

To check all sections you can use $.each(). Since I am guessing you only want to fire the event once, you will need a variable to remember all sections, that already fired.

let firedEvents = [];

$(window).scroll(function() {
  $("div.section").each(function() {
    if (!firedEvents.includes(this) && $(window).scrollTop() > $(this).offset().top) {
      firedEvents.push(this);
      alert("fire " + $(this).data("nr"));
    }
  });
});
div {
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" data-nr="0" style="background-color: red;"></div>
<div class="section" data-nr="1" style="background-color: green;"></div>
<div class="section" data-nr="2" style="background-color: blue;"></div>
<div class="section" data-nr="3" style="background-color: yellow;"></div>

Upvotes: 2

Related Questions