1

我正在尝试检测用户是否正在从 Apple 设备查看网站,如果是,则使 div“carriage-promo”以某种方式运行。

通常,当用户向下滚动页面时,此 div 具有过渡和动画以将高度从 0px 变为 40px,这在触摸设备上效果不佳,因此我希望它是静态的。

考虑:

    $(document).ready(function(){
        var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
        var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
        var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");

        if(isiPhone > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
        if(isiPad > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
        if(isiPod > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
    });

过去我只使用 CSS3 媒体查询来进行条件样式行为,但这次需要 jQuery/JS。

有什么建议么?我期待一个微小的语法错误,或者完全误解了它是如何工作的!

4

1 回答 1

1

尝试在准备好时添加此行:

window.scrollBy(0, 1);

看起来它有助于 ios > 5
另一种使用位置的方式:绝对和设置底部位置 scrollTop + windowHeight - promoHeight

于 2013-09-04T08:49:43.250 回答