Verwenden Sie jQuery, um ein div nur anzuzeigen, wenn die Bildlaufposition zwischen 2 Punkten liegt

Question

Ich versuche herauszufinden, wie ein div (#tips) angezeigt wird, wenn der Benutzer in das 2. Viertel seiner div-Höhe scrollt (# wrap) und dann verschwinden, wenn der Benutzer in das letzte Quartal scrollt. So würde es so aussehen:

1. Quartal - #Tips versteckt
2. Quartal - #Tips sichtbar
3. Quartal - #Tips sichtbar
4. Quartal - #Tips ist
versteckt

ich bin fast völlig neu zu jQuery, aber was ich bisher habe, ist dies:

function addKeyboardNavigation(){ 
// get the height of #wrap 
var $wrapHeight = $('#wrap').outerHeight() 
// get 1/4 of wrapHeight 
var $quarterwrapHeight = ($wrapHeight)/4 
// get 3/4 of wrapHeight 
var $threequarterswrapHeight = 3*($wrapHeight) 
// check if we're over a quarter down the page 
if($(window).scrollTop() > $quarterwrapHeight){ 
    // if we are show keyboardTips 
    $("#tips").fadeIn("slow"); 
} 
} 

Dies ist, wo ich verwirrt. Wie kann ich prüfen, ob die Scroll-Position> $ viertelwrackHöhe ist, aber < $ dreiviertelwundeHöhe?

Um es ich habe machen laufen mit: würde

// Run addKeyboardNavigation on scroll 
$(window).scroll(function(){ 
addKeyboardNavigation(); 
}); 

Jede Hilfe oder Anregungen sehr dankbar!

Danke.

Answer 1

Hallo ich demo here geschrieben ... das einzige Problem ist, wenn Ihr #wrap div nicht groß genug ist, die oberen Rand des Fensters erhalten nie die 3/4 Höhe, damit der Tooltip nicht ausgeblendet wird. Hier ist der Code:

$(document).ready(function(){ 
$(window).scroll(function(){ 
    // get the height of #wrap 
    var h = $('#wrap').height(); 
    var y = $(window).scrollTop(); 
    if(y > (h*.25) && y < (h*.75)){ 
    // if we are show keyboardTips 
    $("#tips").fadeIn("slow"); 
    } else { 
    $('#tips').fadeOut('slow'); 
    } 
}); 
}) 

I verwendet height() aber outerHeight() können ... Ich habe vergessen, es in der Demo zu ändern, weil ursprünglich ich die body anstelle des #wrap verwenden.

Ein weiteres Problem wäre, wenn die #wrap nicht oben auf der Seite befindet. Wenn es weiter unten ist, dann werden Sie subtrahieren, um es Position ist auf der Seite der scrollTop:

var y = $(window).scrollTop() - $('#wrap').position().top; 

Answer 2

Wie wäre:

if(($(window).scrollTop() > $quarterwrapHeight) && ($(window).scrollTop() < $threequarterswrapHeight)){ 
    $("#tips").fadeIn("slow"); 
} else { 
    $("#tips").fadeOut("slow"); 
}