Блог

У меня некоторые проблемы с заголовком моего веб-сайта. (веб-сайт: «http://609.sint-rembert.be/leerling05 /»). Я хочу сделать цвет текста заголовка прозрачным, но при нажатии кнопки «Ga naar de introductie» панель навигации все равно должна появляться, как сейчас. Навигационная панель должна быть прозрачной при входе на сайт, но при нажатии кнопки она должна выполнять небольшую анимацию, как сейчас. Цвет текста больше не должен быть прозрачным при нажатии кнопки. Ребята, вы можете мне помочь?

HTML:

 <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#Voorstelling"><img src="assets/img/elektroT.jpg" alt="" /></a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars ml-1"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav text-uppercase ml-auto">
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Voorstelling">Voorstelling</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#eerst">Eerste contact</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">Geschiedenis</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
 

CSS:

 #mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #212529;
}
#mainNav .navbar-toggler {
  padding: 0.75rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.75rem;
  color: #fff;
  text-transform: uppercase;
  background-color: #fed136;
  border: 0;
}
#mainNav .navbar-brand {
  color: #fed136;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
#mainNav .navbar-brand img {
  height: 1.5rem;
}
#mainNav .navbar-nav .nav-item .nav-link {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.95rem;
  color: white;
  letter-spacing: 0.0625em;
}
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #fed136;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border: none;
    background-color: transparent;
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    font-size: 1.5em;
    transition: font-size 0.3s ease-in-out;
  }
  #mainNav .navbar-brand img {
    height: 2rem;
    transition: height 0.3s ease-in-out;
  }
  #mainNav.navbar-shrink {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #212529;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
  }
  #mainNav.navbar-shrink .navbar-brand svg,
#mainNav.navbar-shrink .navbar-brand img {
    height: 1.5rem;
  }
  #mainNav .navbar-nav .nav-item {
    margin-right: 1rem;
  }
  #mainNav .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }
}
 

Вам придется использовать Javascript для получения желаемого результата.

Добавьте одну строку в CSS:

 #mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #212529;
  visibility: hidden; <!-- new line -->
}
 

Добавьте этот скрипт в нижнюю часть вашего body тега, так что непосредственно перед </body> вашей страницей:

 <script>

window.onscroll = function() {
  if (this.scrollY > 25) { // modify the number 25 if you want, this is the amount of scrolling towards the bottom
    toggleVisibility('visible');
  } else {
    toggleVisibility('hidden');
  }
}

function toggleVisibility(mode) {
  document.querySelector('#mainNav').style.visibility = mode;
}

document.querySelector('.btn.btn-primary.btn-xl.text-uppercase.js-scroll-trigger').addEventListener('click', function() {
  setTimeout(function(){
    toggleVisibility('visible');
  }, 500); // 500 is the delay in milliseconds, adjust it a few times to get it right
});

</script>