Bootstrap 4 с липким верхом меняет цвет Navbar

Question

Чтобы получить липкую панель навигации, я использовал класс Bootstrap 4 sticky-top. Я предпочитаю решение css вместо некоторых JS, потому что в прошлом это допускало некоторые ошибки.

Я хочу, чтобы моя панель навигации была прозрачного цвета, когда пользователь ее достигнет. (В тот момент, когда мой navbar становится липким - это работает). До этого он должен иметь случайный цвет. (Это не работает - серый фон появляется на прозрачном фоне класса с наклейками).

Я не нашел хорошего решения, чтобы получить это еще. Я пытался добавить новый класс через JS, но это не сработало.

Пример кодекса

/* Open tabs */
function openTab(evt, parameter) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(parameter).style.display = "block";
  evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
  $('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      //Comment the following line if you don't want to see the anchor in the url
      //target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
/* Smooth scroll END */

/* Global */

* {
  margin: 0px;
  padding: 0px;
  font-family: Roboto,
}

.separator {
  height: 50px;
  background-color: black;
}

/* Global END */

/* Big Carousel */

.big-carousel .carousel-item {
  /* viewport height */
  height: 375px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.big-carousel .carousel-inner {
  height: 375px;
}

.big-carousel .carousel-caption {
  margin-bottom: 110px;
}

.big-carousel .carousel-caption a {
  border: none;
  background-color: rgba(255, 0, 77);
  color: white;
  padding: 20px;
  border-radius: 1px;
}

.big-carousel .carousel-caption a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black;
}

.big-carousel .carousel-indicators i {
  font-size: 40px;
  color: white;
  margin-bottom: 100px;
}

/* Big Carousel END */

/* Navigation */

.navbar {
  background-color: #020202;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 1 !important;
}

.sticky-top {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbar-brand {
  /*padding-left: 60px;*/
}

.navbar a {
  color: #b6b9c1 !important;
}

.nav-social {
  padding-right: 10px;
}

.nav-social i {
  color: white;
}

.navbar .hvr-underline-from-center::before {
  background: white;
  height: 2px;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none;
  border: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none;
}

.cta-nav {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 25px;
}

.cta-nav a {
  background-color: rgba(255, 0, 77);
  color: white !important;
  padding: 10px;
  border-radius: 1px;
}

.cta-nav a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black !important;
}

@media (min-width: 1px) and (max-width: 576px) {
  .navbar-brand {
    padding-left: 7.5px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar-brand {
    padding-left: 15px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .navbar-brand {
    padding-left: 25px;
  }
  .nav-social {
    padding-right: 20px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .navbar-brand {
    padding-left: 50px;
  }
  .nav-social {
    padding-right: 30px;
  }
}

@media (min-width: 1201px) and (max-width: 9999px) {
  .navbar-brand {
    padding-left: 70px;
  }
  .nav-social {
    padding-right: 50px;
  }
}

/* Navigation END */

/* Tab content */

.tabcontent {
  display: none;
  color: black;
  padding-top: 40px;
  padding-bottom: 50px;
}

.tabcontent h1 {
  text-align: center;
  margin-bottom: 15px;
}

.tabcontent h2,
h3,
h4 {
  text-align: center;
}

.tabcontent a {
  text-decoration: none;
  color: #719DE3;
  padding-bottom: 2px;
}

.tabcontent p {
  color: #121212;
}

.tabcontent {
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Tab content END */

/* Start Section 1 */

.start-section {
  height: 100%;
  background: #DAD299;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-attachment: fixed;
}

/* XX1 */

/* XX1 END*/

/* XX2 */

/* XX2 */

/* XX3 */

/* XX3 END */

/* Start Section END */

<!DOCTYPE html>
<html>
<!-- Meta head -->

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/all-css.css">
  <!-- JQuery first -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="js/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->

<body id="top" onload="openTab(event, 't1');">
  <!-- Big Carousel -->
  <div class="big-carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Two - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Three - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Arrow left -->
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
      <!-- Arrow right -->
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  </div>
  <!-- Big Carousel END -->
    <!-- Navigation -->
  <div id="nav-anker"></div>
  <nav class="navbar navbar-dark navbar-expand-md sticky-top">
    <a href="/" class="navbar-brand"><img style="width: 45px;" src=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar2">
      <ul class="navbar-nav mx-auto text-center">
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
        </li>
        <li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
          <a href="">Tickets</a>
        </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
        <li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
      </ul>
    </div>
  </nav>
  <!-- Navigation -->

  <!-- Start Section -->
  <section class="start-section">
    <!-- XX1 -->
    <div id="t1" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Titel</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX1 END -->
    <!-- XX2 -->
    <div id="t2" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Was du wissen musst</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX2 END -->
    <!-- XX3 -->
    <div id="t3" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Wann</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX3 END -->
  </section>
  <!-- Start Section END -->
</body>
</html>

Answer 1

По причинам, * объясненным здесь position:sticky (Bootstrap sticky-top) не дает указания, когда он "застрял".

Поэтому вам необходимо использовать JS для условного изменения цвета / стиля Navbar. Одним из способов является использование IntersectionObserver . Вы можете использовать это на #nav-anker, который является элементом непосредственно перед sticky-top Navbar.

(new IntersectionObserver(function(e,o){
    if (e[0].intersectionRatio > 0){
        document.documentElement.removeAttribute('class');
    } else {
        document.documentElement.setAttribute('class','stuck');
    };
})).observe(document.querySelector('#nav-anker'));

Таким образом, когда Navbar становится закрепленным, к нему добавляется класс stuck. У вас могут быть стили CSS, которые меняются, когда stuck ...

/* style for when sticky is applied */
.stuck .sticky-top {
    background: #000;
}

Демо: https://www.codeply.com/go/psiFbB6Ro6

Answer 2

Вы можете просто переопределить цвет всех стилей "nav". Даже если не рекомендуется использовать "! Важно", это будет работать здесь.

В противном случае вам нужно будет настроить стиль всех родителей до предка навигационной панели или передать идентификатор навигационной панели.

---

РЕДАКТИРОВАТЬ: проверяя смещение элемента к верхней стороне (которое равно 0, если оно липкое), вы можете изменить непрозрачность на любое значение, которое вы хотите. Таким образом, если смещение к вершине равно 0, вы уменьшаете непрозрачность, а если смещение больше 0, вы просто возвращаете непрозрачность обратно к 1.

/* Open tabs */
function openTab(evt, parameter) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(parameter).style.display = "block";
  evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
  $('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      //Comment the following line if you don't want to see the anchor in the url
      //target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });

    /* change opacity if nav is at top of the page */
    var distance = $('nav').offset().top,
    $window = $(window);

    $window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
      $('nav').fadeTo(0.5, 0.2);
    }else{
      $('nav').fadeTo(0.5, 1);
    }
  });

});
/* Smooth scroll END */

/* Global */

* {
  margin: 0px;
  padding: 0px;
  font-family: Roboto,
}

.separator {
  height: 50px;
  background-color: black;
}

/* Global END */

/* Navigation */
nav{
  background-color: red !important;

}

/* Big Carousel */

.big-carousel .carousel-item {
  /* viewport height */
  height: 375px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.big-carousel .carousel-inner {
  height: 375px;
}

.big-carousel .carousel-caption {
  margin-bottom: 110px;
}

.big-carousel .carousel-caption a {
  border: none;
  background-color: rgba(255, 0, 77);
  color: white;
  padding: 20px;
  border-radius: 1px;
}

.big-carousel .carousel-caption a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black;
}

.big-carousel .carousel-indicators i {
  font-size: 40px;
  color: white;
  margin-bottom: 100px;
}

/* Big Carousel END */

/* Navigation */

.navbar {
  background-color: #020202;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 1 !important;
}

.sticky-top {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbar-brand {
  /*padding-left: 60px;*/
}

.navbar a {
  color: #b6b9c1 !important;
}

.nav-social {
  padding-right: 10px;
}

.nav-social i {
  color: white;
}

.navbar .hvr-underline-from-center::before {
  background: white;
  height: 2px;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none;
  border: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none;
}

.cta-nav {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 25px;
}

.cta-nav a {
  background-color: rgba(255, 0, 77);
  color: white !important;
  padding: 10px;
  border-radius: 1px;
}

.cta-nav a:hover {
  background: #EFFF00;
  text-decoration: none;
  color: black !important;
}

@media (min-width: 1px) and (max-width: 576px) {
  .navbar-brand {
    padding-left: 7.5px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar-brand {
    padding-left: 15px;
  }
  .nav-social {
    margin-left: 14px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .navbar-brand {
    padding-left: 25px;
  }
  .nav-social {
    padding-right: 20px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .navbar-brand {
    padding-left: 50px;
  }
  .nav-social {
    padding-right: 30px;
  }
}

@media (min-width: 1201px) and (max-width: 9999px) {
  .navbar-brand {
    padding-left: 70px;
  }
  .nav-social {
    padding-right: 50px;
  }
}

/* Navigation END */

/* Tab content */

.tabcontent {
  display: none;
  color: black;
  padding-top: 40px;
  padding-bottom: 50px;
}

.tabcontent h1 {
  text-align: center;
  margin-bottom: 15px;
}

.tabcontent h2,
h3,
h4 {
  text-align: center;
}

.tabcontent a {
  text-decoration: none;
  color: #719DE3;
  padding-bottom: 2px;
}

.tabcontent p {
  color: #121212;
}

.tabcontent {
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Tab content END */

/* Start Section 1 */

.start-section {
  height: 100%;
  background: #DAD299;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #B0DAB9, #DAD299);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-attachment: fixed;
}

/* XX1 */

/* XX1 END*/

/* XX2 */

/* XX2 */

/* XX3 */

/* XX3 END */

/* Start Section END */

<!DOCTYPE html>
<html>
<!-- Meta head -->

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/all-css.css">
  <!-- JQuery first -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="js/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->

<body id="top" onload="openTab(event, 't1');">
  <!-- Big Carousel -->
  <div class="big-carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Two - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
        <!-- Slide Three - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-image:">
          <div class="carousel-caption">
            <h3>Titel</h3>
            <p>Text</p>
            <br>
            <div class="hvr-pulse-grow cc-a d-md-none">
              <a href="">Tickets</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Arrow left -->
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
      <!-- Arrow right -->
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
  </div>
  <!-- Big Carousel END -->
    <!-- Navigation -->
  <div id="nav-anker"></div>
  <nav class="navbar navbar-dark navbar-expand-md sticky-top">
    <a href="/" class="navbar-brand"><img style="width: 45px;" src=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar2">
      <ul class="navbar-nav mx-auto text-center">
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
        </li>
        <li class="nav-item">
          <a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
        </li>
        <li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
          <a href="">Tickets</a>
        </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
        <li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
        <li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
      </ul>
    </div>
  </nav>
  <!-- Navigation -->

  <!-- Start Section -->
  <section class="start-section">
    <!-- XX1 -->
    <div id="t1" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Titel</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX1 END -->
    <!-- XX2 -->
    <div id="t2" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Was du wissen musst</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX2 END -->
    <!-- XX3 -->
    <div id="t3" class="tabcontent">
      <div class="col-sm-8 offset-sm-2">
        <h1>Wann</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div>
    <!-- XX3 END -->
  </section>
  <!-- Start Section END -->
</body>
</html>