[英]Navbar change color javascript not working
as other here I try to modify the navbar during scrolling down. 像其他这里一样,我尝试在向下滚动时修改导航栏。 I read this question: 我读了这个问题:
Changing nav-bar color after scrolling? 滚动后更改导航栏颜色?
Transition in Navbar when Scroll Down 向下滚动时在Navbar中过渡
Bootstrap navbar change color to the scroll Bootstrap导航栏将颜色更改为滚动
I can't make it work on my website, I don't understand the issue: 我无法使其在我的网站上正常工作,我不理解这个问题:
HTML: 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: 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: JS:
<script>$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-custom");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
From my understanding when scrolling down further than the size of the navbar it should change color. 根据我的理解,向下滚动到导航栏的大小以外时,它应该会更改颜色。
I though it could be a issue because the height of the navbar is not explicitly defined here so I tried adding: 我虽然可能会遇到问题,因为导航栏的高度未在此处明确定义,因此我尝试添加:
CSS 的CSS
.navbar-custom{
background-color: rgba(0,0,0,0.5);
height: 100px;
}
It still didn't work, so I tried also to use another version of the JS proposed here: Changing nav-bar color after scrolling? 它仍然不起作用,因此我也尝试使用此处提出的另一种JS版本: 滚动后更改导航栏颜色?
JS: 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>
Same result nothing changes. 同样的结果没有改变。
I am new using JS what doesn't work here ? 我是使用JS的新手,在这里行不通?
It's because you're using inconsistent scrolling. 这是因为您使用的滚动不一致。 You have 你有
$(window).scroll(function() {...});
However you're checking it with 但是您正在使用
if ($(document).scrollTop() > 100) {...}
And you also have: 而且您还有:
$(document).ready(function() {...});
Make these all either $(window)
or $(document)
, and it will work. 将这些全部设为$(window)
或$(document)
,它将起作用。
Finally, I made it work using this (as part of the w3 back-to-top button tutorial): 最后,我使用了它(在w3的自上而下的按钮教程的一部分中)使其起作用:
JS: 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>
Link to the w3school back to top button: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp 链接到w3school返回顶部按钮: https : //www.w3schools.com/howto/howto_js_scroll_to_top.asp
Thank you 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.