Question

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

Answer 1

您可以尝试这样的方式来获得您想要的结果

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

.red {
    color: red;
}

JSFiddle Link - 向.ready代码

滚动到底部

Answer 2

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

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

更改内容向下滚动的颜色

2 个答案: