Logo visível em determinada rolagem

[Zerfeus 0]

Estou construindo um site one page com 8 sections, sendo que cada section seria uma página do site com height 100%. Eu preciso que a logo no header só apareça a partir da quarta section ( da quarta página). Já pesquisei um bocado mais não achei um código que me ajudasse. Será que consigo resolver esse problema só com CSS3 ?? Se for preciso algum js para isso será que vocês poderiam me mandar o script ? Pois não tenho muita base em js.

Se alguém puder me dar uma luz serei grato

[Zerfeus 0]

Eu consegui esse código

$(document).ready(function() {
 var logo = $('#logo');
         $(window).scroll(function () {
              if ($(this).scrollTop() > 320 ) {
                  logo.removeClass("logo_invisivel");
                  logo.addClass("logo_visivel");
              } else {
                  logo.removeClass("logo_visivel");
                  logo.addClass("logo_invisivel");
              }
        });
 });

Porem a condição pra que ele execute é que a pagina role 320px.. até funciona legal, mas a pagina é responsiva então essa medida teria que variar... alguém pode me dar uma luz

[William Bruno 1501]

Pega a altura da página, e substitui o 320

[Zerfeus 0]

Pega a altura da página, e substitui o 320

O problema é que a página é responsiva, então não poderia usar px... mais consegui resolver o problema com o auxilio de um plugin JS, o sticky.js... Usei uma section como referencia para ele ficar visível e fixo