Question

我正在使用header的网站，该网站位于页面底部，直到它到达屏幕顶部。此时nav固定在顶部。

这在桌面上工作正常，但是在移动设备上nav仅在您的手指在屏幕上时自行修复（即使那时它有点跳跃！）。当你的手机以动力滚动页面时，它就不会固定位置。

逻辑是用jQuery编写的：

// Check the initial Poistion of the Sticky Header
var stickyHeader = $('#header');
var stickyHeaderTop = stickyHeader.offset().top;

$('.wrapper').scroll(function(){

    var windowPos = $('.wrapper').scrollTop();

    if( $('.wrapper').scrollTop() > stickyHeaderTop ) { 

        stickyHeader.css({position: 'fixed', top: '0px', marginTop: '0px'});
        $('.append').css({position: 'fixed', top: '0px', left: '0px', right: '0px'});


    } else {    

        stickyHeader.css({position: 'static', top: '0px', marginTop: '-47px'});
        $('.append').css({position: 'relative'});

    }

});

如果您想检查页面本身this is the link。

为什么它会在移动设备上出现问题？（iOS7 Safari）

jQuery修复标头无法在移动设备上运行

0 个答案: