2015-04-23 6 views
0

я получил следующий код:Добавить класс, когда прибудет элемент

<body> 
    <section id="first"> 
    ... 
    </section> 

    <section id="second"> 
    ... 
    </div> 

    <section id="third"> 
    ... 
    </div> 
</body> 

И я пытаюсь добавить класс section#third, когда страница прибывает DIV на вертикальной прокрутке, но без указания высоты с помощью точек, просто когда страница соответствует элементу.

Кто-нибудь знает, как это сделать?

Thanks y'all!

+2

Есть много и много учебников и плагин, связанные с прокруткой страниц и содержанием – charlietfl

+0

Что делает «страница соответствует элементу» означает? Вы имеете в виду, когда свитки '# third' становятся видимыми на экране? Когда он начинает становиться видимым или когда он полностью виден? – jfriend00

+0

У Охогорина есть хороший ответ. Однако существует ли конкретная причина, по которой вам нужно применять CSS к div при прокрутке списка? Пользователь будет видеть только примененный css, когда div будет отображаться независимо от того, какой css применяется при загрузке страницы или когда он прокручивается –

ответ

0

Что-то вроде этого JSFiddle?

Это называется каждый раз, когда вы перечисляете:

$(window).scroll(function() {

И EIF вы перестанете дольше, чем 250мс, он будет проверять, если вы показываете разыскиваемого раздел, то есть:

clearTimeout($.data(this, 'scrollTimer')); 
     $.data(this, 'scrollTimer', setTimeout(function() { 
      var eTop = $('section#third').offset().top; 
      if(eTop - ($(window).scrollTop()+$(window).height()) < 0) { 
       alert('I am showing!'); 
      } 
     }, 250)); 

Ссылки (некоторые взятые фрагменты) и дальней связи изучение:

Scroll detection

Getting element's location relative to window

Смежные вопросы