JS scroll page with fixed positioned element

Question

Alright, so I have this code (codepen link beneath code):

HTML:

<section id="first">
  <h1>Section 1</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id imperdiet tortor, eget bibendum nulla. Pellentesque posuere lorem ut nunc iaculis, quis dictum leo rhoncus. Aenean commodo posuere nisl ac lacinia. Aliquam erat volutpat. Duis sed pulvinar ante. Vivamus aliquet lectus ac massa condimentum, id sodales metus ultricies. Donec ut ornare dolor.
</section>

<section id="second">
  <h1>Section 2</h1>
  <img src="http://dnawrot.nazwa.pl/expressweb/img/display.png" alt="" />
</section>

<section id="third" class="images">
  <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="" /><br />
  <img src="http://animalia-life.com/data_images/bird/bird1.jpg" alt="" /><br />
</section>

<section id="fourth">
  <h1>Section 3</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id imperdiet tortor, eget bibendum nulla. Pellentesque posuere lorem ut nunc iaculis, quis dictum leo rhoncus. Aenean commodo posuere nisl ac lacinia. Aliquam erat volutpat. Duis sed pulvinar ante. Vivamus aliquet lectus ac massa condimentum, id sodales metus ultricies. Donec ut ornare dolor.
</section>

JS:

$(function() {
  var top = new Waypoint({
    element: document.getElementById('second'), 
    handler: function(direction) {
        $('#second').addClass('fixed');
    }
  });

  var top = new Waypoint({
    element: document.getElementById('fourth'), 
    handler: function(direction) {
      $('#second').removeClass('fixed');
     }
  });

  var top = new Waypoint({
    element: document.getElementById('first'), 
    handler: function(direction) {
      $('#second').removeClass('fixed');
     }
  });
});

http://codepen.io/anon/pen/YXrQmY

There are four different sections. First and fourth sections might contain anything, a dummy text just for purposes of example. Second section contains png image of monitor with transparent box which is the display itself. Third section contains only images each beneath each.

Now what I want to do is to make a second section positioned fixed (by adding .fixed class) when the scroll hits the top of this section and then scroll images from third section underneath the monitor. When scroll hits fourth or first section .fixed class should be removed. Moreover I'd like to have the first image from third section already in area of display when .fixed class is added. And the final thing, it should be responsive :)

The example I've provided removes .fixed class in unexpected areas of page.

Sounds quite messy, but I don't know how to explain it better.

Anyway, I don't really know if this is an appropriate approach, this is just my idea of how to achieve this effect. Maybe there are some extensions for this effect but I coulnd't find any.