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

您可以检查以查看哪个元素在视图中，而不是使用滚动位置。以下示例可能很有用 - 它有点乱，但它显示了如何在页面中获取每个“屏幕”的位置并确定其是否在视图中：

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/

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

1 个答案: