Как сделать так, чтобы два разных по составу, но похожие по назначению скрипта работали «одновременно»?

Здесь видно: cg91812-wordpress-3.tw1.ru, как два красных блока, где

1) красная полоса с треугольником, которая .intro-page МЕНЯЕТ цвет через скрипт и работает под jquery-ui:

<script>
  $(window).scroll(function () {
  if ($(this).scrollTop() >= 0 && $(this).scrollTop() < 50) {
    $('.intro-page').stop();
    $('.intro-page').animate({backgroundColor: '#e76054'}, 220);
  } else if ($(this).scrollTop() >= 50 && $(this).scrollTop() < 200) {
    $('.intro-page').stop();
    $('.intro-page').animate({backgroundColor: '#edeef0'}, 220);
  }
});
</script>

2) красный блок ниже ЗАТУХАЕТ через скрипт:

<script>      
$(window).scroll(function() {
    if ($(this).scrollTop()>50) {
        $('.footer-wrapper').fadeOut();
    }
    else {
      $('.footer-wrapper').fadeIn();
    }
 });
</script>

Как бы сделать так, что бы скрипты работали одновременно То есть не было заметно, что блоки существуют отдельно друг от друга
Было бы хорошо, что бы получился взаимосвязанный скрипт, либо работали они по одному принципу