我想在div向下滚动时改变标题的颜色,下面是我的代码。
HTML
<h1 class="theheader">The Header</h1>
<div class="tablelimiter">
<table>
<thead>
<th>column 1</th>
<th>Column 2</th>
<th>column 3</th>
</thead>
<tbody>
<tr>
<td>row 1 in column 1</td>
<td>row 1 in column 2</td>
<td>row 1 in column 3</td>
</tr>
<tr>
<td>row 2 in column 1</td>
<td>row 2 in column 2</td>
<td>row 2 in column 3</td>
</tr>
<tr>
<td>row 3 in column 1</td>
<td>row 3 in column 2</td>
<td>row 3 in column 3</td>
</tr>
<tr>
<td>row 4 in column 1</td>
<td>row 4 in column 2</td>
<td>row 4 in column 3</td>
</tr>
<tr>
<td>row 5 in column 1</td>
<td>row 5 in column 2</td>
<td>row 5 in column 3</td>
</tr>
<tbody>
<table>
</div>
和css
.tablelimiter{overflow: auto; height: 300px;}
我正在使用slimScroll
//add slim scroll for the table limiter
$('.tablelimiter').slimScroll({
height: '200px',
alwaysVisible: true,
allowPageScroll: false,
railVisible: true
});
这些都很好用。现在我想要的是当.tablelimiter
内容(这个设置为overflow: auto
以便有滚动条的东西)向下滚动时,我想要.theheader
(h1,标题)来将颜色变为红色。怎么做?任何帮助,建议,想法,建议,线索将不胜感激。谢谢!
答案 0 :(得分:1)
您可以尝试这样的方式来获得您想要的结果
$('.tablelimiter').scroll(function(e) {
$(this).scrollTop() > 0 ?
$('.theheader').addClass('red') :
$('.theheader').removeClass('red');
});
.red {
color: red;
}
JSFiddle Link - 向.ready
代码
答案 1 :(得分:0)
根据文档,您可以添加一个侦听器来检查是否已达到顶部/底部:
$('.tablelimiter').slimScroll({
height: '200px',
alwaysVisible: true,
allowPageScroll: false,
railVisible: true
}).bind('slimscroll', function(e, pos){
if(pos == "bottom")
$('.theheader').css('color', 'red');
else // if (pos == "top")
$('.theheader').css('color', 'black');
});