У меня возникают проблемы с переходом моего заголовка для работы на IOS - PullRequest
Новая
       3

У меня возникают проблемы с переходом моего заголовка для работы на IOS

0 голосов
/ 19 июня 2019

Ситуация

У меня есть заголовок на моем сайте, который должен быть прозрачным, если сайты прокручиваются до конца.Иначе быть белым

Мне нужно изменить 3 элемента при каждом переходе: логотип, цвета ссылки и фон.

Проблема

Версия для ПК

Версия IOS

(у меня есть только iPhone и iPad, поэтому я не могу тестировать на Android)

Все отлично работает на моем рабочем столе, но когда яИспользование сайта на устройстве IOS происходит следующее:

  1. Веб-сайт открывается со значением прокрутки 0.

  2. Когда я прокручиваю вниз, 3 из 3 изменяется правильно.

  3. Однако при прокрутке вверх, фон остается непрозрачным.(Меняются только 2 из 3 элементов. (Логотип и ссылки).)

Я обнаружил, что, если я очень медленно прокручиваю назад до вершины, он срабатывает 1/3 раза.

Что я пробовал

Использование rbga в качестве значения фона вместо «прозрачного» * ​​1039 *

Вот мои HTML-теги:

Logo 

 <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;
    }
}

+

Если у вас есть лучший способ справиться с этим, пожалуйста, поделитесь, я только начинаю.

1 Ответ

0 голосов
/ 19 июня 2019

Я только что сделал фрагмент и сделал некоторые изменения. Это должно работать. 

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>
...