Użyj jQuery, aby pokazać element div tylko wtedy, gdy pozycja przewijania znajduje się między 2 punktami

Question

Próbuję ustalić, jak wyświetlić element div (#tips), gdy użytkownik przewinie do drugiej ćwiartki zawierającej wysokość elementu div (# wrap), a następnie zniknie, gdy użytkownik przewinie do ostatniego kwartału. Więc byłoby tak:

1. kwartał - #tips jest ukryty
2. kwarta - #tips jest widoczne
3 kwartał - #tips jest widoczne
4 kwartał - #tips jest ukryty

Jestem niemal całkowicie nowe do jQuery, ale co mam do tej pory to:

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"); 
} 
} 

to gdzie ja się mylić. Jak mogę sprawdzić, czy pozycja przewijania wynosi> $ quarterwrapHeight, ale < $ threequarterswrapHeight?

aby go uruchomić Używam:

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

Każda pomoc lub sugestie będą bardzo mile widziane!

Dzięki.

Answer 1

Witam napisali demo here ... jedynym problemem jest to, czy #wrap div nie jest wystarczająco wysoki, w górnej części okna nigdy nie dostać się do 3/4 wysokość, więc etykieta narzędzia nie zniknie. Oto kod:

$(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'); 
    } 
}); 
}) 

użyłem height() ale można użyć outerHeight() ... zapomniałem zmienić go w demie bo pierwotnie używałem body zamiast #wrap.

Kolejny problem polegałby na tym, że #wrap nie znajduje się u góry strony. Jeśli to dalej w dół, a następnie trzeba będzie odjąć to pozycja na stronie z scrollTop:

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

Answer 2

Jak o:

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