Как заставить элемент исчезать при прокрутке страницы?

Question

На моей странице есть следующий элемент:

<div id="banner" class="disappear">Hello</div>

CSS для этого элемента:

#banner {position:fixed;}
.disappear {opacity:0;}
.appear {opacity:1;}`

Я хотел бы знать, как изменить класс с .disappear на .appear с помощью jQuery, когда страница прокручивается до определенной точки, а затем обратно на .disappear, когда страница возвращается в исходное положение.

Answer 1

Проверьте jQuery Маршрутные точки .

Используя этот плагин, вы можете сделать что-то вроде этого:

<div id="banner">Hello</div>

И ваш JQuery:

$("#banner").waypoint(function(){
    $(this).fadeIn(750);
},{
    offset: 'bottom-in-view'
});

Answer 2

Я не сделал полный рабочий пример. Но вам нужно будет использовать $(window).scroll(function(){ для выполнения каждый раз, когда окно прокручивается. Затем в этой функции вам нужно будет проверить $(window).scrollTop(), чтобы определить, как далеко прокрутился пользователь.

http://jsfiddle.net/s8dhy/

Затем, основываясь на этом значении, вы добавите и удалите классы или fadeIn и fadeOut. Заголовок говорит, что вы хотите «исчезнуть», и в этом случае вы захотите использовать fadeIn и fadeOut. Если вы просто хотите добавить и удалить класс, используйте addClass и removeClass.