Question

我试图找出为什么这在iphone上不起作用但在桌面上效果很好。在crossbrowsertesting.com尝试了它，它在Android手机上工作正常..但不在iPhone上。

   // Sticky Header
$(window).scroll(function() {

    if ($(window).scrollTop() > 100) {
        $('.main_h').addClass('sticky');
    } else {
        $('.main_h').removeClass('sticky');
    }
});

// Mobile Navigation
$('.mobile-toggle').click(function() {
    if ($('.main_h').hasClass('open-nav')) {
        $('.main_h').removeClass('open-nav');
    } else {
        $('.main_h').addClass('open-nav');
    }
});

$('.main_h li a').click(function() {
    if ($('.main_h').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_h').removeClass('open-nav');
    }
});

// navigation scroll lijepo radi materem
$('nav a').click(function(event) {
    var id = $(this).attr("href");
    var offset = 70;
    var target = $(id).offset().top - offset;
    $('html, body').animate({
        scrollTop: target
    }, 500);
    event.preventDefault();
});

Answer 1

如果Codepen上显示的内容是完整的HTML，那么问题很可能在于HTML中缺少某些代码。

创建<head>并在其中插入<meta name="viewport" content="width=device-width, initial-scale=1">。

详细了解setting the viewport - Google Docs。

Answer 2

我知道你可以使用jquery mobile

中的以下摘录而不使用jquery或javascript来执行粘性标题效果

要启用此工具栏功能类型，请应用数据全屏=＆＃34;真＆＃34;属性和data-position =＆＃34;固定＆＃34; 属性为页眉和页脚div元素。框架还将取消设置内容容器（.ui-content）的填充。

导航栏在移动设备上没有响应

2 个答案: