更改内容向下滚动的颜色

时间:2015-04-19 16:43:28

标签: javascript jquery css

我想在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,标题)来将颜色变为红色。怎么做?任何帮助,建议,想法,建议,线索将不胜感激。谢谢!

2 个答案:

答案 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');
});