how to show hidden div between two id's with jquery waypoint

Question

I have this jquery script that shows a hidden div, when I scroll down between A and B in pixels (A = start of my CV and B = end of CV) and returns to hidden when not between A and B.

$(window).scroll(function () {
    if ($(this).scrollTop() > 1800 && $(this).scrollTop() < 5550) {
        $("#cvBoxWrap").fadeIn();
    } else {
        $("#cvBoxWrap").fadeOut();
    }
}); 

Is it possible to exchange the pixels values with jQuery waypoint ID's - so the CV div would show when the user scroll down between two different ID and disappear when not between?

The reason is when viewed on iPad the pixel values doesn't match the CV div ID and therefore the hidden div shows incorrect.

in advance thanx

I got it to work with this:

    $(window).scroll(function () {
    if ($(this).scrollTop() > $('#A1').offset().top) && $(this).scrollTop() < $('#A2').offset().top)) {
$("#cvBoxWrap").fadeIn();} else { 
        $("#cvBoxWrap").fadeOut(); }
    });

Answer 1

$(window).scroll(function () {
    if ($(this).scrollTop() > $('#A1').offset().top) && $(this).scrollTop() < $('#A2').offset().top)) {
         $("#cvBoxWrap").fadeIn(); 
    } else { 
         $("#cvBoxWrap").fadeOut(); 
    } 
});

Answer 2

You could use empty anchors like

<a id="a1"></a>

Then check if you have scrolled to their position with

$('#a1').offset().top