javascript - 更改徽标滚动导航栏 - 实现?
问题描述
我希望有人可以帮助我,我希望导航栏的滚动来更改徽标的图像。
我是一个新手,但很固执,我尝试在网上寻找类似的东西,但出于我的目的,我找不到任何东西。
我只想更改卷轴上的徽标图像。
$(document).scroll(function() {
if ($(this).scrollTop() >= 30) {
$(" .brand-logo").html("<img src='img/edizioni-white.png'>");
} else {
$(".brand-logo").html("<img src='img/edizioni-black.png'>");
}
});
nav {
position: fixed;
top: 0;
left: 0;
height: 84px;
width: 100%;
background-color: #fff;
padding: 20px 18px;
transition: background-color 0.4s ease-out;
}
nav#navbar {
height: 95px;
}
nav.scroll {
background-color: #000 !important;
height: 95px;
transition: background-color 1000ms;
color: #fff !important;
}
a.color-font-menu {
color: black;
font-size: 20px;
}
nav.scroll a {
color: white;
}
.brand-logo img {
height: auto;
width: 130px!important;
margin-top: -20px;
}
.box {
height: 500px;
margin-top: 100px;
}
.box.orange {
margin-top: 200px;
}
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!--Import materialize.css-->
<link href="../materialize/core/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- Let browser know website is optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--JavaScript at end of body for optimized loading -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../materialize/core/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- scrolling change logo -->
<script type="text/javascript" src="js/script.js"></script>
<nav id="navbar">
<div class "container">
<a href="#!" class="brand-logo">
<img src="img/edizioni-black.png">
</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down ">
<li><a class="color-font-menu" href="#">Home</a></li>
<li><a class="color-font-menu" href="#">Blog</a></li>
<li><a class="color-font-menu" href="#">Video</a></li>
<li><a class="color-font-menu" href="#">About</a></li>
<li><a class="color-font-menu" href="#">Contact</a></li>
<li><a class="color-font-menu" href="#">Chi siamo</a></li>
</ul>
</div>
<!-- end container -->
</nav>
<ul class="sidenav " id="mobile-demo">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Chi siamo</a></li>
</ul>
<div class="container">
<div class="box orange"></div>
<div class="box purple"></div>
<div class="box blue"></div>
<div class="box orange"></div>
<div class="box blue"></div>
</div>
解决方案
在 questo modo funziona。
<script> $(document).scroll(function() {
if ($(this).scrollTop() >=30) {
$("#navbar .brand-logo").html("<img src='img/edizioni-white.png'>");
} else {
$("#navbar .brand-logo").html("<img src='img/edizioni-black.png'>");
}
});
</script>
推荐阅读
- python - 具有整数数组索引的 Numpy 块矩阵分配
- python - 需要多个 wait_for_messages discord.py
- vb.net - VB.NET,框架 3.5 | Windows 和 ProgramFilesX86 文件夹作为字符串?
- google-maps - Google Maps API BUG - 不返回特定示例的位置
- java - 如何使用 Mockito 跳过调用 void 方法
- c# - NAudio 在函数被调用之前播放音乐
- vb.net - VSTO Outlook 加载项中的分叉线程
- laravel - Laravel 5.5 无法使用 belongsTo 获取选定的列数据
- python - 远程 Jupyter Notebook + Docker -- 不更新文件目录?
- sql-server - 修改 SQL Server 存储过程以在执行更新语句之前检查条件