jQuery, scrollTop 및 toggleClass를 사용하여 본문에 클래스를 추가하는 방법

Question

jQuery의 scrollTop 기능과 관련된 질문이 있으며 수직 스크롤 양에 따라 클래스를 전환 할 수 있습니다.

내가 달성하고자하는 것은 "section.banner"클래스가있는 페이지에서 클래스를 body 태그에 적용한 배너를 지나서 스크롤하는 것입니다. 이렇게하면 사이트의 머리글에있는 여러 SVG의 채우기 색상과 페이지 매김을위한 고정 위치의 측면 nav를 변경할 수 있습니다.

저는 자바 스크립트에서 끔찍한데, 수 시간 동안 검색을 시도하고 있습니다. 어떤 도움을 주시면 대단히 감사하겠습니다. 여기에 내가 지금 작업하고있는 코드가 있습니다 (CodeKit은 그것이 틀렸다는 것을 말하고 있습니다, 나는 놀랍지 않습니다). 200의 값은 단지 자리 표시 자이며 유체 이미지의 높이로 계산됩니다. 전체 공개, 나는 괄호와 괄호가 맞는지 잘 모른다. 이 같은

// Header/Fixed Pagination Banner Scroll Recoloriing (toggle class) 
    // Check If '.banner' Exists 
    if($('section.banner').length > 0) { 

     $('body').scrollTop(function)() 
     { 
      if $(window).scrollTop >= 200 { 
       $('body').toggleClass('downtown'); 
       return false; 
      } 
     } 
    } 

Answer 1

시도 뭔가 :

if($('section.banner').length > 0) { 

    $(window).scroll(function() { 
    { 

     if ($(window).scrollTop() >= $('section.banner').scrollTop()) { 
      $('body').toggleClass('downtown'); 
      return false; 
     } 
    }); 
} 

UPDATE

내 코드에서 약간의 실수가 있었다 : http://jsfiddle.net/t2yp15hq/

var top = $('section.banner').position().top; 

if($('section.banner').length > 0) { 

    $(window).scroll(function() { 

     if ($(this).scrollTop() >= top) { 
      $('body').addClass('downtown'); 

     } 
     else 
     { 
      $('body').removeClass('downtown'); 
     } 
    }); 
} 

그것은 toogleClass 작동하지 않습니다는 배경이 깜박입니다. 창 크기를 조정할 때

UPDATE

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

이 솔루션은 정상을 다시 계산하는 것입니다

$(window).resize(function(){ 
    top = $('section.story-intro').offset().top - 90; 
});