jquery 检测用户是否滚动到移动设备中的某个点

Question

我在移动设备上有一个固定位置的菜单，当用户滚动到不同的部分时，菜单条目必须更改。 到目前为止，我正在使用这个:

        if (scroll >= 860) {
            $('#menu_link_1').show();
        }else{
            $('#menu_link_1').hide();
        }

        if (scroll >= 1300) {
            $('#menu_link_2').show();
        }else{
            $('#menu_link_2').hide();
            $('#menu_link_1').show();
        }

但是由于每个移动设备的高度可能不同，这并不精确，如果滚动已经达到某个点而不是根据 html 的高度，有人可以告诉我其他方法来改变它吗？

Answer 1

除了使用 scroll-position，您还可以检查哪个元素在 View 中。以下示例可能会有用 - 它有点困惑，但它显示了如何获取页面中每个“屏幕”的位置并确定其是否在 View 中:

function testInView($el){
    var wTop = $(window).scrollTop();
    var wBot = wTop + $(window).height();
    var wMid = wBot - ($(window).height()/2);
    var eTop = $el.offset().top;
    var eBot = eTop + $el.height();
    return (((eTop <= wMid) && (eBot >= wMid)));
}
function setInView(){
    $(".inview").removeClass("inview");
    $("div.screen").each(function(){
        var $zis = $(this);
        if(testInView($zis)){
           $zis.addClass("inview");
            $("a[href='#"+$zis.attr("id")+"']").addClass("inview");
        }
    });
}
$(document).on('ready scroll resize touchmove',setInView);

演示:http://jsfiddle.net/64y6N/