Sử dụng jQuery để chỉ hiển thị div khi vị trí cuộn nằm giữa 2 điểm

Question

Tôi đang cố gắng tìm ra cách để nhận được div (#tips) xuất hiện khi người dùng cuộn vào quý 2 chiều cao của div chứa (# quấn) và sau đó biến mất khi người dùng cuộn vào quý cuối cùng. Vì vậy, nó sẽ là như thế này:

1st quý - #tips ẩn
2 quý - #tips có thể nhìn thấy
3 quý - #tips có thể nhìn thấy
4 quý - #tips ẩn

Tôi gần như hoàn toàn mới đối với jQuery nhưng những gì tôi có cho đến thời điểm này là:

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

Đây là nơi tôi bị lẫn lộn. Làm thế nào tôi có thể kiểm tra xem vị trí cuộn là> $ quarterwrapHeight nhưng < $ threequarterswrapHeight?

Để làm cho nó chạy Tôi đã sử dụng:

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

Bất kỳ sự giúp đỡ hoặc gợi ý sẽ được đánh giá rất nhiều!

Cảm ơn.

Answer 1

Hi tôi đăng một demo here ... vấn đề duy nhất là nếu div #wrap của bạn không đủ cao, phía trên cùng của cửa sổ sẽ không bao giờ đến được 3/4 chiều cao, do đó, tooltip sẽ không phai mờ. Đây là mã:

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

tôi đã sử dụng height() nhưng bạn có thể sử dụng outerHeight() ... Tôi quên để thay đổi nó trong bản demo vì ban đầu tôi đã sử dụng body thay vì #wrap.

Một vấn đề khác là nếu #wrap không nằm ở đầu trang. Nếu nó tiếp tục xuống, thì bạn sẽ phải trừ vị trí của nó trên trang từ scrollTop:

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

Answer 2

Làm thế nào về:

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