javascript - 页面滚动时更改标题

Question

我想将导航从透明背景更改为白色背景。 导航尺寸应减小， Logo 应消失。

它应该与此页面上的完全相同:https://www.praxis-loeber.de

我已经为它编写了 jquery 代码，但不幸的是它仍然不起作用。

如果有人能告诉我代码中的错误在哪里，我会非常高兴。

这是我的代码:

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > 10) {
    $(".navigation").addClass("transparent");
    $(".hr").hide();
    $(".header-logo-container").hide();
    $("a").css("color", "black");
  } else {
    $(".navigation").removeClass("transparent");
    $(".hr").show();
    $(".header-logo-container").show();
    $("a").css("color", "white")
  }
});

.header {
  height: 820px;
  background-image: url("../img/beispiel.png");
  background-size: cover;
}

.header-unterseite {
  height: 500px;
  background-image: url("../img/beispiel.png");
  background-size: cover;
}

.navigation {
  position: sticky;
  top: 0px;
}

.navigation.transparent {
  background-color: white;
}

.header-logo-container {
  text-align: center;
  @media(max-width: 950px) {
    display: none;
  }
}

.header-logo {
  width: 11%;
  margin-top: 20px;
}

.header-navbar-links {
  float: left;
  font-family: 'Open Sans', bold;
  margin-top: -50px;
  font-size: 100%;
  margin-left: 150px;
  @media(max-width: 950px) {
    display: none;
  }
}

.header-navbar-links li {
  float: right;
  list-style-type: none;
  margin-right: 26px;
}

.header-navbar-links a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.header-navbar-links a:hover {
  color: #88c602;
}

.header-navbar-rechts {
  color: white;
  float: right;
  margin-top: -50px;
  font-family: 'Open Sans', bold;
  font-size: 100%;
  margin-right: 150px;
  @media(max-width: 950px) {
    display: none;
  }
}

.header-navbar-rechts li {
  float: left;
  list-style-type: none;
  margin-right: 26px;
}

.header-navbar-rechts a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.header-navbar-rechts a:hover {
  color: #88c602;
}

.footer-hr {
  color: rgb(255, 255, 255);
  width: 100%;
  height: 5px;
  @media(max-width: 950px) {
    display: none;
  }
}

.slogan {
  color: rgb(255, 255, 255);
  text-align: center;
  font-family: 'Ubuntu', regular;
  font-size: 450%;
  margin-top: 84px;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}

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

.description {
  background-color: #88c602;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: 'Ubuntu', regular italic;
  font-size: 200%;
  padding-top: 27px;
  padding-bottom: 27px;
}

.description-title {
  font-size: 180%;
  margin-top: -15px;
}

#side-menu-trigger {
  float: right;
  color: rgb(255, 255, 255);
  margin-top: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 200%;
  height: inherit;
  @media(min-width: 950px) {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-menu" style="display: none;">
  <h3>Navigation</h3>
  <ul class="side-menu-navigation">
    <?php require (__DIR__ . "/navigation-   links.php"); ?>
    <?php require (__DIR__ . "/navigation-rechts.php") ?>
  </ul>
</div>
<header class="header">
  <div class="navigation">
    <div class="header-logo-container">
      <a href="index.php"><img src="img/Logo_Petra.png" class="header-logo" alt="Logo"></a>
    </div>
    <nav class="header-navbar">
      <ul class="header-navbar-links">
        <?php require (__DIR__ . "/navigation-links.php"); ?>
      </ul>
      <ul class="header-navbar-rechts">
        <?php require (__DIR__ . "/navigation-rechts.php"); ?>
      </ul>
      <button id="side-menu-trigger">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </nav>
    <div class="hr">
      <hr class="footer-hr" />
    </div>
  </div>
  <div class="container" onload="document.getElementById(slogan).style.opacity='1'">
    <div class="slogan">
      Herzlich Willkommen in der<br> Praxis für Sprachtherapie<br> Petra Daase-Beck
    </div>
  </div>
</header>
<div class="description">
  <div class="description-title"><strong>Wortstark</strong></div>
  in Sprache und Schrift für Kinder - Jugendliche<br> und Erwachsene
</div>

Answer 1

这是代码。所有代码都工作正常。只需对 CSS 进行少量更改。希望您需要此 header 。如果有任何更改，请告诉我。

https://jsfiddle.net/fovbwhx1/8/

$(window).scroll(function() {
  
  var scroll = $(window).scrollTop();

  if (scroll > 10)  {
    $(".navigation").addClass("transparent");
    $(".hr").hide();
    $(".header-logo-container").hide();
    $("a").css("color", "black");

  }

  else {
    $(".navigation").removeClass("transparent");
    $(".hr").show();
    $(".header-logo-container").show();
    $("a").css("color","white")
  }

});

*{
  padding:0;
  margin:0;
}
.container{
  margin-top:150px;
}
.header {
  height: 820px;
  background-image: url("https://dummyimage.com/800x800/ff00ff/fff.png");
  background-size: cover;
}
.header-unterseite {
  height: 500px;
  background-image: url("../img/beispiel.png");
  background-size: cover;
}
.navigation {
  position: fixed;
  top: 0px;
  width:100%;
}
.navigation.transparent {
  background-color: red;
}
.header-logo-container {
  text-align: center;

}
.header-logo {
  width: 11%;
  margin-top: 20px;
}
.header-navbar-links {
  float: left;
  font-family: 'Open Sans', bold;
  margin-top: -50px;
  font-size: 100%;
  margin-left: 150px;
}
.header-navbar-links li {
  float: right;
  list-style-type: none;
  margin-right: 26px;
}
.header-navbar-links a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.header-navbar-links a:hover {
  color: #88c602;
}
.header-navbar-rechts {
  color: white;
  float: right;
  margin-top: -50px;
  font-family: 'Open Sans', bold;
  font-size: 100%;
  margin-right: 150px;

}
.header-navbar-rechts li {
  float: left;
  list-style-type: none;
  margin-right: 26px;
}
.header-navbar-rechts a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.header-navbar-rechts a:hover {
  color: #88c602;
}
.footer-hr {
  color: rgb(255, 255, 255);
  width: 100%;
  height: 5px;
}
.slogan {
  color: rgb(255, 255, 255);
  text-align: center;
  font-family: 'Ubuntu', regular;
  font-size: 450%;
  margin-top: 110px;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.description {
  background-color: #88c602;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: 'Ubuntu', regular italic;
  font-size: 200%;
  padding-top: 27px;
  padding-bottom: 27px;
}
.description-title {
  font-size: 180%;
  margin-top: -15px;
}
#side-menu-trigger {
  float: right;
  color: rgb(255, 255, 255);
  margin-top: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 200%;
  height: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-menu" style="display: none;">
  <h3>Navigation</h3>
  <ul class="side-menu-navigation">
    <?php require (__DIR__ . "/navigation-   links.php"); ?>
    <?php require (__DIR__ . "/navigation-rechts.php") ?>
  </ul>
</div>

<header class="header">
  <div class="navigation">
    <div class="header-logo-container">
      <a href="index.php"><img src="https://dummyimage.com/200x100/000/fff.png" class="header-logo" alt="Logo"></a>
    </div>
    <nav class="header-navbar">
      <ul class="header-navbar-links">
        <?php require (__DIR__ . "/navigation-links.php"); ?>
      </ul>
      <ul class="header-navbar-rechts">
        <?php require (__DIR__ . "/navigation-rechts.php"); ?>
      </ul>
      <button id="side-menu-trigger">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </nav>
    <div class="hr">
      <hr class="footer-hr" />
    </div>
  </div>
  <div class="container" onload="document.getElementById(slogan).style.opacity='1'">
    <div class="slogan">
      Herzlich Willkommen in der<br>
      Praxis für Sprachtherapie<br>
      Petra Daase-Beck
    </div>
  </div>
</header>
<div class="description">
  <div class="description-title"><strong>Wortstark</strong></div>
  in Sprache und Schrift für Kinder - Jugendliche<br>
  und Erwachsene
</div>