我一直在谷歌上搜索这个问题，发现了这个解决方案:
$(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".header").addClass("active");
} else {
//remove the background property so it comes transparent again
$(".header").removeClass("active");
}
});
});
CSS:
header{
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
height: 70px;
align-items: center;
justify-content: space-between;
}
.active{
background-color: lightgray;
}
和HTML:
<body>
<header>
<a href="#" class="logo">
<h3>
Logo will go here
</h3>
</a>
<div class="header-links">
<a id="home-link" href="#home">Home</a>
<a id="portfolio-link" href="#portfolio">Portfolio</a>
<a id="about-link" href="#about">About me</a>
<a id="contact-link" href="#contact">Contact</a>
</div>
</header>
在html正文的末尾是:
<script src="{{ asset('js/script.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
浏览器Dev Tools控制台显示此错误3次:
Uncaught ReferenceError: $ is not defined
我需要的是在用户将屏幕向下滚动一些像素后，将Header更改为新的背景颜色。我在网上搜索，大部分发现了相同的修复，这是上面提出的，但由于某种原因，它只是不工作，我的标题从来没有改变背景颜色。知道为什么吗?
如果asset('js/script.js')是您保存$(function () { ... })代码的地方，那么它应该在之后加载jquery .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('js/script.js') }}"></script>
我尝试了这个代码，它为我工作。问题是css。
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".header").addClass("active");
} else {
//remove the background property so it comes transparent again
$(".header").removeClass("active");
}
});
添加!important到你的。active类，它应该工作。
.active{
background-color: lightgray !important;
}