javascript生成的CSS类不应用样式答案

【问题标题】：CSS class generated by javascript does not apply stylejavascript生成的CSS类不应用样式
【发布时间】：2019-09-25 20:03:46
【问题描述】：

在 iPhone Safari 浏览器上测试页面时，我的行为非常奇怪。

菜单（导航栏）通过javascript给出CSS类后，样式不应用

导航栏应该在顶部显示角的下方，但是当滚动时它应该粘在顶部。所以它是粘性导航栏。

解决方案是由在页脚onDocument 中触发的javascript 准备好的。它在导航栏的 ID 中添加了一个 CSS 类 - 称为“sticky”

CSS:
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

JS
var navbar = document.getElementById("mainNav");
    var sticky = navbar.offsetTop;

    function myFunction() {
        if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky");
        } else {
            navbar.classList.remove("sticky");
        }
    }

offset taken by:
$('body').scrollspy({
        target: '#mainNav',
        offset: 75
    });

它可以在笔记本电脑上正常运行（CHrome、Safari ..）它添加了类并完成了工作。导航栏粘在顶部。

在 iPhone 上还添加了“粘性”类。但在检查器中查看时，并没有应用实际的样式。

样式表已正确加载...

发生了什么？

【问题讨论】：

这里需要js吗？你试过使用position: sticky 吗？
是的。菜单可滚动大约 200 像素，然后当它到达顶部时，它就会变粘。所以添加和删除类

标签： javascript css iphone safari

【解决方案1】：

这个问题可以被关闭，因为它已经被 iPhone 清除了缓存。

在第一次编码时，设置中的按需和多次清理缓存没有帮助。最后过期在内部强制 iOS/Safari 真正重新加载内容。

正常工作

【讨论】：