在我滚动页面100px之后，我试图使固定标题更改为背景颜色 [英] I'm trying to make fixed header change it's background-color after I scroll the page 100px
本文介绍了在我滚动页面100px之后，我试图使固定标题更改为背景颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在尝试使固定的标题更改为滚动后的背景颜色 100px ，并在使用以下jQuery滚动回来后再次更改为默认值：
I was trying make a fixed header change it's background color after scrolling 100px and again change back to default after I scroll back using the following jQuery:
这是我的实际代码。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).scroll(function() {
//After scrolling 100px from the top...
if ( $(window).scrollTop() >= 100 ) {
$('#menu').css('background', '#fff');
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('#menu').removeAttr('style');
}
});
</script>
</head>
<body>
<header>
<table>
<tr>
<td id="menu" class="title">
TITLE
</td>
<td style="width:40px;">
<div class=" ico">
<img src="search.svg" alt="search" style="width: 25px;" />
</div>
</td>
<td style="width: 40px;">
<div class=" ico">
<img src="menu.svg" alt="search" style="width: 25px;"/>
</div>
</td>
</tr>
</table>
</header>
.
.
.
</body>
</html>
任何人都可以识别我的问题？
Can anyone identify my problem?
推荐答案
jQuery(document).scroll(function() {
var y = jQuery(this).scrollTop();
if (y > 100) {
jQuery('#menu').addClass('scrollActive');
} else {
jQuery('#menu').removeClass('scrollActive');
}
});
只需添加您的CSS
#menu.scrollActive {
background-color: blue; // or color what you want;
}
这篇关于在我滚动页面100px之后，我试图使固定标题更改为背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
