Comparing variable to array values in $(window).scroll Event

360
November 22, 2016, at 12:30 PM

So, like the title said, I'm having trouble trying to figure out a way to compare a variable, currentOffset to my array offsets. So, let's say I have currentOffset inside a $(window).scroll(); event, like so...

var currentOffset = 0; 
var sections = $('section').get(); 
var offsets = []; 
 
var i = 0; 
sections.forEach(function () { 
    offsets.push($(sections[i]).offset().top); 
    i++; 
}); 
 
$(window).scroll(function () { 
    currentOffset = $(window).scrollTop(); 
});

How would I constantly check whether or not the currentOffset is >= one of the offsets in my array. So lets say the the array contains the following data...

[8, 332, 656]

When the user scrolls, and the currentOffset either is 8 or is greater than 8, then trigger an event. Then when the user hits 332, or scrolls to a greater depth than 332 then trigger another event.

Is this possible?

Answer 1

Here's a fiddle:

jsfiddle.net/LsLaeakj/1

var currentOffset = 0;
var sections = $('section').toArray();
var offsets = [];
for (var i = 0; i < sections.length; i++){
 offsets.push($(sections[i]).offset().top);   
}
console.log(offsets);
$(window).scroll(function () {
    currentOffset = $(window).scrollTop();
    console.log(checkOffset());
   $('section').css('background-color', 'white'); $(sections[checkOffset()]).css('background-color', 'red');
});
function checkOffset(){
 for (var i = 0; i < offsets.length; i++){
    if (offsets[i] > currentOffset){
        return i-1;
    }
 }
 return offsets.length
}

It sets the last offset div to have a red background, and logs it to the console. Obviously this can be changed but hopefully it illustrates the functionality you were after.

Answer 2

In the scroll callback you could just loop through each array value and test. Breaking if you find one. This assumes the array is in increasing order as well.

var offset, nextOffset, length = offsets.length;
for (var index = 0; index < length; index++) {
    offset = offsets[index];
    nextOffset = offsets[index + 1];
    if (index == length - 1 && currentOffset >= offset) {
        // if last index don't bother checking next value, trigger event
    }
    else if (currentOffset >= offset && nextOffset && currentOffset < nextOffset) {
        // trigger event
        break;
    }
}
Answer 3

try to rewrite the loop like this:

var offsets = [];
$.each($('section'),function (i,v) {
    offsets.push($(v).offset().top)
});

then inside the scroll event use this:

var prevScroll = offsets[0]!=null ? offsets[0] : 0;
var toTrigger = 0;
$.each(offsets,function(i,v){
    if(i>0 && currentOffset >= prevScroll && currentOffset < v){
        toTrigger = i;
        return true;
    }
    prevScroll = v; 
});
switch(toTrigger){
    case 1: 
        function1();
        break;
    case 2:
        function2();
        break;
    case 3:
        function3();
        break;
}
Rent Charter Buses Company
READ ALSO
Issues with ajax request (Cordova)

Issues with ajax request (Cordova)

i have some issues with outgoing requests in my cordova app. [nnn]neither ajax request's are working, nor i can include images like this: <img src="http://www.

337
.replaceWith() is not working in jQuery 1.9+

.replaceWith() is not working in jQuery 1.9+

I'm trying to clone a <textarea> and clone and replace the digit in the label <label> Number 1 <label> increasing by 1 each time the add button is pressed (So the first label will have Number 1, the label underneath Number 2 etc). .

429
jQuery Find element from data

jQuery Find element from data

I'm having problems finding and setting the value of an element based on data set with jQuery. .

429
How to initialize CKEditor textarea line breaks as like html textarea line breaks

How to initialize CKEditor textarea line breaks as like html textarea line breaks

Purpose : I'm using a word counter plugin with CKEditor, so i need to use CKEditor as like a textarea. I need the plain text value.

334