Question

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

它应该与此页面上的样子完全一样：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几乎没有变化。希望您需要此标头。如有任何更改，请告诉我。

here

$(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>

Answer 2

编辑：我正是按照您的要求进行的；从透明标题转换为白色。

也许这会对您有所帮助，只需一点CSS和简单的js

<div id="header">Header</div>
<div style="margin-top:200px;padding:15px 15px 2500px;font-size:30px">
  <p><b>The Lorem Ipsum.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll to the top to remove the effect.</p>
  <p>What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

CSS：

    body{
  background-color: grey;
}
#header {
  background-color: transparent;
  padding: 50px 10px; /* Some padding */
  color: black;
  text-align: center; /* Centered text */
  font-size: 90px; /* Big font size */
  font-weight: bold;
  position: fixed; /* Fixed position - sit on top of the page */
  top: 0;
  width: 100%; /* Full width */
  transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}

还有js

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
    document.getElementById("header").style.backgroundColor="white";
  } else {
    document.getElementById("header").style.fontSize = "90px";
    document.getElementById("header").style.backgroundColor="transparent";
  }
}

在此示例： https://jsfiddle.net/rick95/vpt173az/5/

Answer 3

@RevtiShah

我的代码如下：

*{
    padding:0;
    margin:0;
  }
  
  .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;
  
    @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: 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;
  
    @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>


<script type="text/javascript">

$(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")
        }
});

</script>

当我打开页面时，它看起来像这样：

我不知道是不是这样，但是我仍然使用骨架作为框架和scss。也许这是一个默认值，它将破坏导航。

页面滚动时更改标题

3 个答案: