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的视口屏幕宽度，请验证是否使用了大于该尺寸的屏幕。我尝试在此处复制您的代码，但是$(window).scrollTop()在这里很适合我。

Image with your code on 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) {...

希望有帮助。

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

3 个答案: