($ (window) .scrolltop ()> не работает на ios

Я использую ниже код JS, чтобы исправить заголовок вверху только для мобильных устройств. означает, что при прокрутке экрана для 80 пикселей классы css будут заменены. работает на Android и ПК, но не на 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;

} это код.

Вы уверены, что это не проблема CSS? Если код выполняется на Android и ПК, он, вероятно, делает то же самое на iOS, но результаты, вероятно, не идентичны. Не могли бы вы опубликовать остальную часть вашего кода?

James Ives 31.10.2018 14:24

Спасибо за ответ. Просто добавил свой HTML-код.

Hassan Cheema 31.10.2018 14:27

Можете ли вы также включить CSS для custom-fixed-top.

James Ives 31.10.2018 14:30

Код CSS добавлен выше.

Hassan Cheema 31.10.2018 14:49
1
4
3 421
3

Ответы 3

Хорошо, это может показаться надуманным но...

Попробуйте добавить следующее в свой CSS в свой тег html, если они работают на IOS:

cursor: pointer;

Возможно, ваш if может проверить ширину экрана окна просмотра с помощью 768, проверьте, используете ли вы какой-либо экран выше этого размера. Я пытаюсь воспроизвести ваш код здесь, но $(window).scrollTop() здесь отлично работает.

Изображение с вашим кодом в Google Chrome

Попробуйте изменить это;

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) {...

Надеюсь, это поможет.

Другие вопросы по теме