在内容向下滚动时更改颜色

Question

我想在 div 向下滚动时更改 header 的颜色，下面是我的代码。

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, header) 将颜色更改为红色。怎么做？任何帮助、建议、想法、建议、线索将不胜感激。谢谢！

Answer 1

您可以尝试这样的操作以获得您想要的结果

$('.tablelimiter').scroll(function(e) { 
    $(this).scrollTop() > 0 ? 
        $('.theheader').addClass('red') : 
        $('.theheader').removeClass('red');
});

.red {
    color: red;
}

JSFiddle Link - 滚动到底部以获得 .ready 代码

Answer 2

根据文档，您可以添加一个侦听器来检查是否达到 top/bottom：

$('.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');
});

在内容向下滚动时更改颜色

change color on content scroll down

javascript

jquery

css