61,112
社区成员
发帖
与我相关
我的任务
分享设置头部导航固定并随着页面下拉变得透明
如题，设置头部导航固定并随着页面下拉变得透明
固定，是position: fixed;
下拉变透明怎么处理？
固定，是position: fixed;
下拉变透明怎么处理？
...全文
请发表友善的回复…
发表回复
懒猫猫IT 2017-04-10
- 打赏
- 举报
谢谢各位解答，已经解决了。代码实现效果，滚动 超过100像素给header增加一个透明样式，否则移除这个透明样式。
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$("#header").addClass("menu_bg");
}else{
var current = $("#header ");
current.removeClass("menu_bg");
current = $(this);
}
})
}
);
千杯不醉476 2017-04-08
- 打赏
- 举报
简单调用了下jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-3.1.1.min.js"></script>
<style>
body{
height:2000px;
margin:0
}
div{
background:red;
height:200px;
width:100%;
position:fixed;
}
</style>
<script>
$(window).scroll(function(){
$('div').css({
opacity:(2000-($('div').offset().top))/2000
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
IMyxuan 2017-04-07
- 打赏
- 举报
在js里面监听页面滚动的事件，然后判断当前滚动条的位置，在合适的位置改变导航栏的透明度
看着是个昵称 2017-04-07
- 打赏
- 举报
下拉到一定的距离的时候更改背景颜色就好了，使用js实现
