我无法转换标题以在IOS上工作

Question

情况

如果网站一直向上滚动，则网站上的标题是透明的。还是白人

我需要在每个过渡中更改3个元素：徽标，链接的颜色和背景。

问题

Desktop Version

IOS Version

（我只有iPhone和iPad，因此无法在android上进行测试）

一切都可以在我的桌面上正常运行，但是当我在IOS设备上使用该网站时，会发生以下情况：

1. 网站打开，滚动值为0。

2. 当我向下滚动时，3个中的3个正确更改。

3. 但是，当我滚动回到顶部时，背景保持不透明。 （仅3个元素中的2个发生了变化。（徽标和链接）。）

我发现，如果我非常缓慢地滚动回到顶部，它可以工作1/3次。

我尝试过的

使用rbga作为背景值，而不是“透明”

这是我的HTML标签：

徽标

 <a class="navbar-brand mr-5"><img id="navbar-logo" src="../src/lib/images/logo-white.png" alt="MSC"></a>

链接

<ul class="navbar-nav mr-auto">
    <li class="nav-item"><a class="nav-link active" href="./index.html">Accueil</a>
       </li>
    <li class="nav-item"><a class="nav-link" href="./services.html">Services</a>
       </li>
    <li class="nav-item"><a class="nav-link" href="./equipe.html">Equipe</a>
       </li>
    <li class="nav-item"><a class="nav-link" href="./contact.html">Contact</a>
    </li>
</ul>

导航栏

<nav id="home" class="container navbar-main navbar navbar-expand-md navbar-dark fixed-top">

CSS

.navbar{
    background: rgba(255, 255, 255, 0);
    font-family: 'Lato', sans-serif;
    transition: background 0.3s;
}

JS

let scrollValue = 0; //Scroll value
const navbar = document.getElementById("home"); //navbar
const navbarLogo = document.getElementById("navbar-logo"); //logo



window.addEventListener("scroll", e => {
    //Changes 'scrollValue' for the current scrollY
    scrollValue = scrollY;
})

setInterval(event => {
    console.log(scrollValue)
    if (scrollValue < 10) {
        navbarTransition("light-trans");
    } else {
        navbarTransition("light");
    }
}, 250)` //Checks the scroll value every 250ms.


function navbarTransition(theme) {
    switch (theme) {
        case "light":
            navbarLogo.src = "../src/lib/images/logo.png";
            navbar.style.background = "#fff";
            navbar.classList.remove("navbar-dark");
            navbar.classList.add("navbar-light");
            break;
        case "light-trans":
            navbarLogo.src = "../src/lib/images/logo-white.png";
            navbar.style.background = "transparent";
            navbar.classList.remove("navbar-light");
            navbar.classList.add("navbar-dark");
            break;
    }
}

+

如果您有更好的处理方法，请分享，我才刚开始。

Answer 1

我只是做了一个摘要，并做了一些更改。应该可以。

let scrollValue = 0; //Scroll value
const navbar = document.getElementById("home"); //navbar
const navbarLogo = document.getElementById("navbar-logo"); //logo



window.addEventListener("scroll", e => {
  //Changes 'scrollValue' for the current scrollY
  scrollValue = scrollY;
})

setInterval(event => {
  if (scrollValue < 10) {
    navbarTransition("light-trans");
  } else {
    navbarTransition("light");
  }
}, 250)
//Checks the scroll value every 250ms.


function navbarTransition(theme) {
  switch (theme) {
    case "light":
      navbarLogo.src = "http://placehold.it/300x50.jpg";
      navbar.style.background = "#000";
      navbar.classList.remove("navbar-dark");
      navbar.classList.add("navbar-light");
      break;
    case "light-trans":
      navbarLogo.src = "http://placehold.it/30x50.jpg";
      navbar.style.background = "transparent";
      navbar.classList.remove("navbar-light");
      navbar.classList.add("navbar-dark");
      break;
  }
}

.navbar {
  background: rgba(255, 255, 255, 0);
  font-family: 'Lato', sans-serif;
  transition: background 0.3s;
  position: fixed;
  left: 0;
  right: 0;
}

.navbar-light {
  background: red;
}

body {
  height: 200vh;
}

<nav id="home" class="container navbar-main navbar navbar-expand-md navbar-dark fixed-top">

  <a class="navbar-brand mr-5"><img id="navbar-logo" src="http://placehold.it/300x50.jpg" alt="MSC"></a>

  <ul class="navbar-nav mr-auto">
    <li class="nav-item"><a class="nav-link active" href="./index.html">Accueil</a>
    </li>
    <li class="nav-item"><a class="nav-link" href="./services.html">Services</a>
    </li>
    <li class="nav-item"><a class="nav-link" href="./equipe.html">Equipe</a>
    </li>
    <li class="nav-item"><a class="nav-link" href="./contact.html">Contact</a>
    </li>
  </ul>
</nav>