那些遇到过的问题

页面滚动时更改标题

Mr.*_*.Mo 5 html javascript css jquery

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

它应该与此页面上的完全相同：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")
  }
});
Run Code Online (Sandbox Code Playgroud) 
.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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Rev*_*hah 4

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

\n\n

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

\n\n

\r\n
\r\n
$(window).scroll(function() {\r\n  \r\n  var scroll = $(window).scrollTop();\r\n\r\n  if (scroll > 10)  {\r\n    $(".navigation").addClass("transparent");\r\n    $(".hr").hide();\r\n    $(".header-logo-container").hide();\r\n    $("a").css("color", "black");\r\n\r\n  }\r\n\r\n  else {\r\n    $(".navigation").removeClass("transparent");\r\n    $(".hr").show();\r\n    $(".header-logo-container").show();\r\n    $("a").css("color","white")\r\n  }\r\n\r\n});
Run Code Online (Sandbox Code Playgroud)\r\n
*{\r\n  padding:0;\r\n  margin:0;\r\n}\r\n.container{\r\n  margin-top:150px;\r\n}\r\n.header {\r\n  height: 820px;\r\n  background-image: url("https://dummyimage.com/800x800/ff00ff/fff.png");\r\n  background-size: cover;\r\n}\r\n.header-unterseite {\r\n  height: 500px;\r\n  background-image: url("../img/beispiel.png");\r\n  background-size: cover;\r\n}\r\n.navigation {\r\n  position: fixed;\r\n  top: 0px;\r\n  width:100%;\r\n}\r\n.navigation.transparent {\r\n  background-color: red;\r\n}\r\n.header-logo-container {\r\n  text-align: center;\r\n\r\n}\r\n.header-logo {\r\n  width: 11%;\r\n  margin-top: 20px;\r\n}\r\n.header-navbar-links {\r\n  float: left;\r\n  font-family: \'Open Sans\', bold;\r\n  margin-top: -50px;\r\n  font-size: 100%;\r\n  margin-left: 150px;\r\n}\r\n.header-navbar-links li {\r\n  float: right;\r\n  list-style-type: none;\r\n  margin-right: 26px;\r\n}\r\n.header-navbar-links a {\r\n  text-decoration: none;\r\n  color: rgb(255, 255, 255);\r\n}\r\n.header-navbar-links a:hover {\r\n  color: #88c602;\r\n}\r\n.header-navbar-rechts {\r\n  color: white;\r\n  float: right;\r\n  margin-top: -50px;\r\n  font-family: \'Open Sans\', bold;\r\n  font-size: 100%;\r\n  margin-right: 150px;\r\n\r\n}\r\n.header-navbar-rechts li {\r\n  float: left;\r\n  list-style-type: none;\r\n  margin-right: 26px;\r\n}\r\n.header-navbar-rechts a {\r\n  text-decoration: none;\r\n  color: rgb(255, 255, 255);\r\n}\r\n.header-navbar-rechts a:hover {\r\n  color: #88c602;\r\n}\r\n.footer-hr {\r\n  color: rgb(255, 255, 255);\r\n  width: 100%;\r\n  height: 5px;\r\n}\r\n.slogan {\r\n  color: rgb(255, 255, 255);\r\n  text-align: center;\r\n  font-family: \'Ubuntu\', regular;\r\n  font-size: 450%;\r\n  margin-top: 110px;\r\n  -webkit-animation: fadein 2s;\r\n  /* Safari, Chrome and Opera > 12.1 */\r\n  -moz-animation: fadein 2s;\r\n  /* Firefox < 16 */\r\n  -ms-animation: fadein 2s;\r\n  /* Internet Explorer */\r\n  -o-animation: fadein 2s;\r\n  /* Opera < 12.1 */\r\n  animation: fadein 2s;\r\n}\r\n@keyframes fadein {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n.description {\r\n  background-color: #88c602;\r\n  text-align: center;\r\n  color: rgb(255, 255, 255);\r\n  font-family: \'Ubuntu\', regular italic;\r\n  font-size: 200%;\r\n  padding-top: 27px;\r\n  padding-bottom: 27px;\r\n}\r\n.description-title {\r\n  font-size: 180%;\r\n  margin-top: -15px;\r\n}\r\n#side-menu-trigger {\r\n  float: right;\r\n  color: rgb(255, 255, 255);\r\n  margin-top: 35px;\r\n  padding-top: 5px;\r\n  padding-bottom: 5px;\r\n  padding-right: 25px;\r\n  padding-left: 25px;\r\n  font-size: 200%;\r\n  height: inherit;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\r\n<div class="side-menu" style="display: none;">\r\n  <h3>Navigation</h3>\r\n  <ul class="side-menu-navigation">\r\n    <?php require (__DIR__ . "/navigation-   links.php"); ?>\r\n    <?php require (__DIR__ . "/navigation-rechts.php") ?>\r\n  </ul>\r\n</div>\r\n\r\n<header class="header">\r\n  <div class="navigation">\r\n    <div class="header-logo-container">\r\n      <a href="index.php"><img src="https://dummyimage.com/200x100/000/fff.png" class="header-logo" alt="Logo"></a>\r\n    </div>\r\n    <nav class="header-navbar">\r\n      <ul class="header-navbar-links">\r\n        <?php require (__DIR__ . "/navigation-links.php"); ?>\r\n      </ul>\r\n      <ul class="header-navbar-rechts">\r\n        <?php require (__DIR__ . "/navigation-rechts.php"); ?>\r\n      </ul>\r\n      <button id="side-menu-trigger">\r\n        <i class="fa fa-bars" aria-hidden="true"></i>\r\n      </button>\r\n    </nav>\r\n    <div class="hr">\r\n      <hr class="footer-hr" />\r\n    </div>\r\n  </div>\r\n  <div class="container" onload="document.getElementById(slogan).style.opacity=\'1\'">\r\n    <div class="slogan">\r\n      Herzlich Willkommen in der<br>\r\n      Praxis f\xc3\xbcr Sprachtherapie<br>\r\n      Petra Daase-Beck\r\n    </div>\r\n  </div>\r\n</header>\r\n<div class="description">\r\n  <div class="description-title"><strong>Wortstark</strong></div>\r\n  in Sprache und Schrift f\xc3\xbcr Kinder - Jugendliche<br>\r\n  und Erwachsene\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

145 次

最近记录：

6 年，5 月 前
滚动后更改导航栏颜色？ 52
更多相关链接
相关归档
为什么要指定@charset"UTF-8"; 在你的CSS文件中？ 169
开玩笑 ReferenceError：初始化前无法访问 '' 76
在响应式设计中指定HTML文本中的首选换行符 64
translateX和translateY在同一个元素上？ 41
使用CSS将大写字母转换为句子中的小写字母和第一大写字母 33
如何使表格列成为最小宽度 28
使用JavaScript动态添加/删除表行 25
如何在HTML中创建小空格？ 23
Bootstrap 3.0.0模态事件未触发 18
使用jQuery修改svg文件 17
难疑归档
如何修改现有的,未删除的提交？ 7669
如何在特定索引(JavaScript)的数组中插入项？ 2709
如何制作一系列功能装饰器？ 2647
比较Git中的两个分支？ 2149
有没有办法在Android上运行Python？ 2097
使用JavaScript在新选项卡(而不是新窗口)中打开URL 1941
在Python中获取列表的最后一个元素 1871
如何在Vim中进行不区分大小写的搜索 1579
JavaScript是一种传递引用还是按值传递的语言？ 1311
如何重置MySQL中的AUTO_INCREMENT？ 1174