Question

So I’m working on a bit of code where I need to check if one of the elements in an array I’ve generated meets a certain criteria, and if it does, to fadeIn, else fade the #next and #previous elements out. Here is what I have now:

HTML:
<div id="#next"></div>
<div id="#prev"></div>
<div id="page1" class="section"></div>
<div id="page2" class="section"></div>
<div id="page3" class="section"></div>

Javascript

$(window).on('scroll', function () {
var i, stuff = [],
scrollTop = $(window).scrollTop(),
sects = $('.section')

sects.each(function() {
 stuff.push(parseInt($(this).offset()['top'],10));
});

for(i = 0; i < stuff.length; i++) {

        if (stuff[i] == scrollTop) { $('#next,#prev').fadeIn("fast")}
        if (stuff[i] != scrollTop) { $('#next,#prev').fadeOut("fast")}
}

});

The above code causes a flashing effect, because, no matter what, “stuff” will always have a value that is not equal to scrollTop. Hence why I need to say “if any of the returned objects have an offset (‘stuff’) equal to scrollTop, then fadeIn, else, fadeOut.

Any help would be greatly appreciated!

Answer 1

This is a fairly basic flag-value scenario:

var flag = false;
for(i = 0; i < stuff.length; i++) {

        if (stuff[i] == scrollTop) {
            flag = true;
            break;
        }
}

if (flag)
    $('#next,#prev').fadeIn("fast");
else
    $('#next,#prev').fadeOut("fast");