javascript - 页面滚动时更改标题
问题描述
我想将导航从透明背景更改为白色背景。导航的大小应该会减小,并且徽标应该会消失。
它应该看起来与此页面完全相同: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>
解决方案
这是代码。所有代码都可以正常工作。只是css的一些变化。希望您需要此标头。如果有任何更改,请告诉我。
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>
推荐阅读
- java - Spring Data Mongo @Indexed 多次创建索引
- algorithm - 检查新边是否会使 DAG 循环
- powershell - Powershell 从远程主机获取变量值
- terminal - 在命令前添加即时 DNS 解析
- python - 从 np.random.multivariate_normal 重建协方差矩阵时结果不准确
- python - 为什么 WCS 投影子图上的特征在 matplotlib 中的位置错误?
- asp.net-core - 如何使用.net核心更改ubuntu os中的系统日期时间
- python-3.x - 从文本文件中获取特定数据
- objective-c - 在 Objective-C 项目中使用 SVG 路径
- inheritance - WebSharper - 如何将服务器上的动态映射策略模式对象公开给客户端?