（$（window）.scrollTop（）>在IOS上不起作用

Question

我正在使用下面的JS代码来仅在移动设备的顶部修复标头。 表示如果屏幕滚动了80px，css类将被替换。 在Android和PC上工作，但在Ios上没有运气。 有什么建议么？

$(window).scroll(function () {
if ($(window).width() < 768) {
    if ($(window).scrollTop() > 80) {
        $('.navbar-right').addClass('custom-fixed-top');
    }
    else{
        $('.navbar-right').removeClass('custom-fixed-top');
    }
}
});

HTML代码

<nav class="navbar navbar-default">
<div class="mid-container">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed hidden-xs" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="images/logo.png" class="img-responsive" alt="logo"></a>
        </div>

        <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden-xs"><a class="hdr-orng-btn" href="#">受付時間</a></li>
                <li class="hidden-xs"><a class="" href="#">10：00～19：00</a></li>
                <li><a class="num" href="tel:03-0000-0000">TEL　03-0000-0000</a></li>
                <li><a class="hdr-grn-btn" href="#contact_form">お問い合わせ</a></li>
            </ul>
        </div>
    </div>
</div>

.navbar-nav.custom-fixed-top{
position: fixed;
top: 0;
width: 100%;
height: auto;
padding: 0 15px 15px;
margin: 0;
z-index: 2;
background-color:#fff;
left:0;

这是代码。

Answer 1

好的，这似乎很难实现， 但是...

如果它们位于IOS上，请尝试将以下内容添加到html标签中的CSS中：

cursor: pointer;

Answer 2

if验证的是768的视口屏幕宽度， if可能是您的验证，如果您使用的是大于该尺寸的屏幕， if可能是您的验证。 我尝试在这里复制您的代码，但是$(window).scrollTop()在这里对我$(window).scrollTop() 。

图片与您在Google Chrome上的代码

Answer 3

尝试改变这个；

if ($(window).scrollTop() > 80) {...

对此

if ($(body).scrollTop() > 80) {...

如果那样就可以在ios上工作了，那就是问题所在，因此要覆盖两个设备/浏览器，都应实现这样的功能；

var scrollentity = $('html,body');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) 
{ scrollentity = $('body') }
else  { scrollentity = $('html,body') }
scrollentity .scrollTop() > 80) {...

希望能帮助到你。