Else If conditional with logical operators not working in Jquery

I'm having trouble setting animations when the browser window is a different size, in other words, making animations responsive.

In the code below, only the first If block works. The else If block doesn't work, there´s no syntax errors.

Thanks for the help.

$(window).scroll(function(){
var firstAnimation = function() {
  $('#in-view').delay(300).css("display","block").animate({          
      opacity:1,
      right: -150
  },'slow');
};

var h4Animation = function() {
$('#hr1').delay(500).animate({
    width: '60%'
},'200');
};


if ($(window).width() <= 768) {
   if ($(window).scrollTop() > 200 ) {
       h4Animation();
       firstAnimation();       
   } else if ($(window).width() >= 769) { 
       if ($(window).scrollTop() > 100) {
          h4Animation();
          firstAnimation();            
       }
   }
}   
});