【问题标题】:How to make this scrollTop function mobile-friendly如何使此 scrollTop 功能适合移动设备
【发布时间】:2014-07-23 13:23:26
【问题描述】:

我制作了一个在计算机上运行良好的函数。但在手机上,只有在滚动停止时位置才会刷新。这是一个已知问题,我找到了答案,但我没有在我的函数工作中得到它。也许你们中的一个可以帮助我。

我的功能:

$(window).scroll(function () {
    if ($(window).scrollTop() >600) {
        $('#logo').css('position', "fixed");
        $('#logo').css('top', 0);
    }
    else if($(window).scrollTop() < 600) {
        $('#logo').css('position', "relative");
        $('#logo').css('top', 600)
    }
});

在互联网上我发现了这个,我应该在我的函数中替换它:

$('body').on({
    'touchmove': function(e) { 
        console.log($(this).scrollTop()); // Replace this with your code.
    }
});

或者这个:

$('body').bind('touchmove', function(e) { 
    console.log($(this).scrollTop()); // Replace this with your code.
});

如果有人可以重写我的函数以便它在手机中顺利运行,那就太好了。

编辑

我简要解释一下这个函数的作用。当您加载我的页面时,会出现带有标题的黑屏。没有其他的。当您向上滚动时,标题应该正常向上移动,直到他到达顶部。当它到达顶部时,它会获得“位置:固定”属性。当您向下滚动时,它再次获得“位置:相对”属性。没有其他事情应该发生。 但在手机上,文本会向上滚动,直到滚动停止(大多数时候你将文本滚动到屏幕外)并在固定位置弹出。但是当它修好后一切正常,它就站在那里。

【问题讨论】:

    标签: javascript jquery mobile scroll touchmove


    【解决方案1】:

    问题可能出在固定位置而不是scrollTop。固定定位元素对移动设备不是很友好。 其行为取决于移动设备和操作系统。

    更多信息:http://bradfrostweb.com/blog/mobile/fixed-position/

    【讨论】:

    • 我更新了我的帖子,解释了应该发生的事情。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多