导航栏改变颜色javascript无法正常工作
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航栏改变颜色javascript无法正常工作相关的知识,希望对你有一定的参考价值。
和其他人一样,我在向下滚动时尝试修改导航栏。我读了这个问题:
Changing nav-bar color after scrolling?
Transition in Navbar when Scroll Down
Bootstrap navbar change color to the scroll
我无法在我的网站上运行,我不明白这个问题:
html:
<!-- Navbar -->
<nav class="navbar justify-content-center navbar-expand-sm navbar-dark fixed-top navbar-custom">
<!-- Menu Links -->
<ul class="navbar-nav" >
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<!-- Wanted Logo -->
<a class="navbar-brand" href="#">
<img src="img/logo-light.png" alt="wanted_logo" style="width: 3vw;">
</a>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- End Navbar -->
CSS:
.navbar-custom {
background-color: rgba(0,0,0,0.5);
}
.navbar-custom ul li{
text-transform: uppercase;
font-size: 14px;
color: #fff;
padding-top: 34px;
}
.navbar-custom img{
margin-left: 20px;
margin-right: 7px;
}
.navbar-custom.scrolled {
background-color: red !important;
transition: background-color 200ms linear;
}
JS:
<script>$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-custom");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
根据我的理解,当向下滚动超过导航栏的大小时,它应该改变颜色。
我虽然这可能是一个问题,因为这里没有明确定义导航栏的高度所以我尝试添加:
CSS
.navbar-custom{
background-color: rgba(0,0,0,0.5);
height: 100px;
}
它仍然没有用,所以我也尝试使用另一个版本的JS:Changing nav-bar color after scrolling?
JS:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$(".navbar-custom").css("background-color", "#f8f8f8");
} else {
$(".navbar-custom").css("background-color", "blue");
}
});
});
</script>
同样的结果没有变化。
我是新用的JS在这里不起作用?
答案
这是因为你使用了不一致的滚动。你有
$(window).scroll(function() {...});
但是你正在检查它
if ($(document).scrollTop() > 100) {...}
你还有:
$(document).ready(function() {...});
使这些都$(window)
或$(document)
,它会工作。
另一答案
最后,我使用它(作为w3 back-to-top按钮教程的一部分)使其工作:
JS:
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var $nav = $(".navbar-custom");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 50) {
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
}
}
</script>
链接到w3school回到顶部按钮:https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
谢谢
以上是关于导航栏改变颜色javascript无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章