addClass 不适用于 iPhone Chrome

2024-02-19

  // changing navbar background-color by scrolling
  $(window).scroll(function() {
  if ($(this).scrollTop() > 20) {
    $("#tab-nav").addClass("tab-scroll");
  } else {
    $("#tab-nav").removeClass("tab-scroll");
  }
});

.tab-scroll {
  background-color: rgb(255, 255, 255) !important;
}

上面是我的 jquery 和 CSS 代码。我想在导航栏达到一定高度时更改其背景颜色,该代码适用于桌面上的每个浏览器,也适用于 iPhone safari。但它不适用于 iPhone chrome。你们能帮我解决吗?有什么技巧可以使代码兼容任何浏览器吗?

thank


Use Vanilla JS:

function scrollFunctions() {
    var
        pageY = window.pageYOffset,
        tab = document.getElementById('tab-nav');

    /** @Sticky Header **/
    if (pageY > 20) {
        tab.classList.add('tab-scroll');
    }
    else if (pageY <= 20) {
        tab.classList.remove('tab-scroll');
    }
}

window.addEventListener('scroll', function () {
    scrollFunctions();
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

addClass 不适用于 iPhone Chrome 的相关文章

随机推荐

  • XML 最佳实践:属性与附加元素 [重复]

    这个问题在这里已经有答案了 两者之间有什么区别以及何时应该使用它们
  • String.Equals(string1.Substring(0, x), string2) 比 string1.StartsWith(string2) 更好吗?

    我正在使用字符串比较来测试 URL 路径StringComparison OrdinalIgnoreCase MSDN给出了以下字符串比较建议HERE http msdn microsoft com en us library dd4651
  • 计算移动圆的碰撞,不重叠边界

    假设我有一个圆在矩形区域内弹跳 在某个时刻 这个圆将与矩形的一个表面碰撞并反射回来 我这样做的通常方法是让圆与边界重叠 然后反映速度矢量 圆实际上与边界重叠的事实通常不是问题 在低速时也不是很明显 在高速行驶时 很明显圆圈正在做一些不应该做
  • 浏览器控制台出错,请求 /sockjs-node/info?t=1555629946494

    我使用 vue cli 创建了一个新网站 我正在使用开发服务器来提供页面服务 当我在浏览器中查看该页面时 我看到浏览器控制台中显示两种类型的错误 GET http 172 31 7 153 4000 sockjs node info t 1
  • Oracle的ORA_HASH是“随机的”吗?

    Ora hash 是确定性的 因为保持输入和种子恒定将产生确定的输出 但是 对于任何种子 包括默认种子 ora hash 的输出必然具有以下属性 没有任何方法可以用来预测 ORA HASH 的结果 并且成功率高于纯粹随机猜测吗 可能不会 不
  • Hibernate @Inheritance,表作为父级,视图作为子级

    我在 Hibernate 中遇到这种情况 其中两个类之间存在父子关系 但数据库中没有这种关系 因为子类代表视图 而不是表 现在的问题是 要让 Hibernate 满意继承注解 https docs oracle com javaee 7 a
  • JavaFx 图像大小调整

    我有一个 borderPane 顶部有菜单 左侧有一个网格 中间有一个图像 我希望图像的大小与边框中心相同 因为现在图像超出了我的网格 我试过这个 imageView fitWidthProperty bind box widthPrope
  • 删除 R 中选择性 NA 的有价值行[重复]

    这个问题在这里已经有答案了 我有一个像这样的数据框 1 2 abc NA NA NA NA 2 3 abd be f NA NA 4 5 NA NA NA NA NA 现在 我想删除那些包含从第 3 列开始的所有 NA 的行 我正在做这样的
  • 每2秒更换一次图片

    我积累了一点 所以如果有人有任何想法 那会很有帮助 目前该程序正在编译并运行 但我不知道如何完成它 我正在使用日食 我想做的是 当我启动程序时 每 2 秒更换 4 张不同的图片 所以如果您有任何建议 请不要害羞 这是程序 Here is t
  • MySQL 查询和数据透视表

    我的 MySQL 数据库具有以下列标题 month typeOfWork totalHours 我有兴趣根据工作类型和月份显示结果 例如 所有 typeOfWork 条目将显示在左侧第一列中 并且每个字段将汇总每列指定月份中的特定 type
  • 在 Swift 中使用 Parse 获取 Twitter 个人资料图像

    在 Swift 中没有找到任何关于此的信息 所以我问 如何使用 Parse 从 Twitter 获取已登录用户的个人资料图片 用户已经通过解析内部登录 signupController 登录 var username PFUser curr
  • Dask 数据帧并行任务

    我想从数据帧创建功能 附加列 并且我有以下许多功能的结构 遵循本文档https docs dask org en stable delayed best practices html https docs dask org en stabl
  • 有什么办法可以逃避弹性beanstalk环境变量中的“非法字符”?

    我正在尝试为 Rails 应用程序创建一个新的弹性 beanstalk 环境 并且将现有 RDS 实例的详细信息作为环境变量传递 该 RDS 实例是根据前一个 Elastic beanstalk 实例的快照创建的 但是该实例是由 Elast
  • NightwatchJS .elements 返回字符串而不是对象

    我正在使用 nightwatch 并尝试迭代元素列表 但是 当我没有获取对象或元素时 但我得到了一个字符串数组 CODE browser elements css selector ele function r browser perfor
  • Spring Repository 接口中使用 sort() 和 limit() 进行查询

    我是 Spring Data with MongoDB 的新手 希望在我的 MongoRepository 扩展接口中拥有一个自动生成的查询方法 该方法需要过滤 排序和限制 查询如下所示 created is the field I nee
  • 在 QT 中将配置设置保存到 XML 文件吗?

    我想将配置设置保存到 QT 中的 XML 文件并从那里读取它 在 QT 中执行此操作的最佳方法是什么 任何样品 想法都受到高度赞赏 Thanks 您可以使用以下方式注册您的 XML 文件格式QSettings registerFormat
  • CakePHP:验证消息不显示

    我是 cakePHP 的新手 我按照一些教程制作了一个简单的表单 在这个 html 表单上我使用了验证 现在的问题是验证正在工作 但消息没有显示我希望它显示的内容 我尝试了下面的代码 Model public validate array
  • JS - 如何提交表单 onclick 并发送提交按钮

    我需要通过按钮提交表单 这超出了 JavaSript 表单的范围
  • 使用向上/向下滑动动画显示和隐藏视图

    我有一个LinearLayout我想用一个来显示或隐藏Animation每当我改变布局的可见性时 它就会向上或向下推动布局 我见过一些样品 但没有一个适合我的需要 我已经为动画创建了两个 xml 文件 但当我更改动画的可见性时 我不知道如何
  • addClass 不适用于 iPhone Chrome

    changing navbar background color by scrolling window scroll function if this scrollTop gt 20 tab nav addClass tab scroll