如何实现鼠标从顶部滚动时导航的背景色由透明变为其他颜色
1个回答
2016-05-12 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.header{
width: 100%;
height: 64px;
background: rgba(0, 0, 0, .9);
color: #FFF;
font-size: 32px;
text-align: center;
position: fixed;
top: 0;
left: 0;
transition: background 1s;
}
.content{
width: 100%;
height: 1000px;
position: relative;
padding-top: 64px;
}
.scrolledDown{
background: rgba(0, 0, 0, 0);
color: #ddd;
}
</style>
<script>
(function(){
pos = 0;
ticking = false;
var header = document.querySelector(".header");
window.addEventListener("scroll", function(e){
pos = window.scrollY;
if(pos > 100&&!ticking){
header.classList.add("scrolledDown");
ticking = true;
}
if(pos < 100 && ticking){
header.classList.remove("scrolledDown");
ticking = false;
}
});
})();
</script>
</head>
<body>
<header class="header">
menu
</header>
<div class="content">
this is a content
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.header{
width: 100%;
height: 64px;
background: rgba(0, 0, 0, .9);
color: #FFF;
font-size: 32px;
text-align: center;
position: fixed;
top: 0;
left: 0;
transition: background 1s;
}
.content{
width: 100%;
height: 1000px;
position: relative;
padding-top: 64px;
}
.scrolledDown{
background: rgba(0, 0, 0, 0);
color: #ddd;
}
</style>
<script>
(function(){
pos = 0;
ticking = false;
var header = document.querySelector(".header");
window.addEventListener("scroll", function(e){
pos = window.scrollY;
if(pos > 100&&!ticking){
header.classList.add("scrolledDown");
ticking = true;
}
if(pos < 100 && ticking){
header.classList.remove("scrolledDown");
ticking = false;
}
});
})();
</script>
</head>
<body>
<header class="header">
menu
</header>
<div class="content">
this is a content
</div>
</body>
</html>
已赞过
已踩过<
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
