изменить цвет по содержанию прокрутить вниз

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