javascript - 滚动时更改颜色
问题描述
我一直在寻找解决方案,但我无法让它工作。
当用户开始滚动页面时,我希望我的页眉从透明背景变为红色背景。
$(window).on("scroll", function() {
if($(window).scrollTop() > 800) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
* {margin:0;padding:0}
html {
background: lightgray;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 1s ease-in-out;
height: auto;
background-color: rgba(17, 42, 107, 0.7);
text-align: center;
line-height: 40px;
}
.header.active {
background: red;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">the header</div>
解决方案
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 10) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
推荐阅读
- csv - 如何在 Roo Rails 中使用 last_row 省略空行
- python - 函数输出到循环
- ios - 快速从文件中减去和更新
- google-apps-script - 如何设置用户回答问题时自动显示的反馈
- c# - 相当于将我的 newtonsoft 实现转换为 .net core 3.0 中的新 JSON 库期间的默认值
- excel - 从 FormControl ListBox 检索值时出现运行时错误
- angular - 如何为 Angular GET 请求设置验证码
- php - 获取每个数组中存在的嵌套数组的值
- python - 无法在 Python 中导入 Weka
- hibernate - 使用 @SpringBootTest 禁用数据库连接