Question

在 css 上已完成了总下拉菜单，并在一些普通的javascript上确定了滚动导航位置。

用于滚动位置

/**
 * Sticky JavaScript Navigations
 * For Home Page Only
 */


window.onscroll = function () {
    navSticky()
};

const mghFixedNav = document.getElementsByClassName("mgh-main-nav-area")[0];

// const sticky = llnav.offsetTop;
function navSticky() {
    if (window.pageYOffset > 100) {

        mghFixedNav.style.top = "50px";
        mghFixedNav.style.width = "100%";
        mghFixedNav.style.left = "0";
        mghFixedNav.style.right = "0";
    } else {
        mghFixedNav.style.top = "75px";
        mghFixedNav.style.width = "95%";
        mghFixedNav.style.left = "2.5%";
        mghFixedNav.style.right = "2.5%";
    }
}

Firefox 和 Chrome 浏览器运行正常，但iMac中的 Safari 浏览器未显示导航栏和下拉菜单。

这是codepen link

有人可以帮助我吗？在此先感谢。

Answer 1

只需删除以下CSS代码，它将开始在Safari上运行：

//header top

header {
  overflow: hidden;
}

以下是您可以直接验证的代码笔link。

Answer 2

您不应该真正使用window.onscroll来创建这种效果，the intersection observer有更好，更高效的方法来实现。

使用此方法，您可以查看有多少元素可见，而无需侦听scroll事件并且无需永久重新计算它，浏览器将为您完成。

首先，您定义观察者：

var options = {
  rootMargin: '10px',
  threshold: 0.2
} 

var observer = new IntersectionObserver(callback, options);

在您的情况下，目标将是这样的：

var target = document.getElementsByClassName("mgh-main-nav-area")[0];
observer.observe(target);

我无法从头开始为您的问题编写代码，对此我感到抱歉。但我希望至少可以为您指出应该使用哪种工具的正确方向。

这是我为toggling a sticky-class找到的一个固定导航示例：)

css下拉列表未在iMac Safari浏览器中显示

2 个答案: