В интернете полно статей на тему работы обработчика scroll() jquery, но как сделать анимацию или событие при прокрутке или прохождения пользователем определенного блока? Ссылка на исходники как всегда в конце статьи.
Начнем:

• У нас пять блоков на странице
• Опускаемся до второго блока - показываем блок с уведомлением(в моем случае это будет картинка астерикса с рекламой)
• Опускаемся до третьего блока - прячем астерикса
• Опускаемся до пятого блока - показываем блок с чувачком-дизайнером
• Опускаемся до футера - прячем дизайнера

Немного усложним задачу и подключим на сайт небольшой скрипт кнопки - "TO TOP". Пролистывая наш сайт в нижнем правом углу будет появляться кнопочка с иконкой вверх - эта иконка будет накладываться поверх блока с парнем-дизайнером, так что код придется модифицировать. И построим небольшой каркас для нашего приложения.

    
    
    
   
    
    


    

        

            
            
polyakov.co.ua
        

        

            
Scroll jQuery. Создание анимации при прокрутке страницы до определнных блоков.
            
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
            
        

        

        

        

        

        


        

    

В шапке сайта я подключаю jquery 1.7.2 можно подключить последнюю версию - конфликтов не возникнет. Иконки font-awesome - я часто пользуюсь этой библиотекой, на мой взгляд самая лучшая коллекция иконок для повседневной работы создания сайтов.

Файл стилей и файл с скриптами. В конце документа мы выводим три наших главных блока - кнопку наверх, блок с астериксом и блок с дизайнером.
Давайте пропишем стили для наших элементов.

#top {
    font-size:24px;
    bottom: 25px;
    right: 25px;
    position: fixed;
    z-index: 4;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.5s linear;
    background-size: 51px;
}
    #top.visible {
        visibility: visible;
        opacity: 0.5;
    }
        #top.fade-out {
            opacity: 1;
        }
            #top.visible.fade-out.visible-not{
                opacity: 0;
            }
#asterix {
    background: url("../images/2.png") top center no-repeat;
    width: 400px;
    height: 200px;
    display: block;
    font-size:30px;
    color:#27577f;
    padding: 85px 0 0 180px;
    font-family: 'Scada', sans-serif;
    bottom: -200px;
    left: 25px;
    position: fixed;
    z-index: 4;
    opacity: 1;
    cursor: pointer;
    transition: all 0.5s linear;
}
    #asterix.visible {
        bottom:0;
    }

#design-boy {
    background: url("../images/1.gif") top center no-repeat;
    width: 344px;
    height: 399px;
    display: block;
    font-size:30px;
    color:#fb6f20;
    padding: 75px 100px 0 30px;
    font-family: 'Scada', sans-serif;
    bottom: -399px;
    right: 25px;
    position: fixed;
    z-index: 4;
    opacity: 1;
    cursor: pointer;
    transition: all 0.5s linear;
}
    #design-boy.visible {
        bottom:0;
    }

Блоки будут плавно выезжать - для этого мы добавили css свойство transition. Позиционирование фиксированное и задали отрицательную позицию всем блокам. Добавляя класс с нулевым расположением и свойством transition мы добились красивой анимации плавного появления блока.

Но без jQuery ни чего же работать не будет ;) Давайте уже напишем наш код:

// =========================================================================  scroll to top
jQuery(document).ready(function($) {	
	var offset = 100,	
		offset_opacity = 300,	
		scroll_top_duration = 900,	
		$back_to_top = $('#top');
	
	$(window).scroll(function () {
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('visible') : $back_to_top.removeClass('visible fade-out');
		if ($(this).scrollTop() > offset_opacity) {
			$back_to_top.addClass('fade-out');
		}
	});
	
	$back_to_top.on('click', function (event) {
		event.preventDefault();
		$('body,html').animate({
				scrollTop: 0,
			}, scroll_top_duration
		);
	});

});
// =========================================================================  scroll boy girl block
$(function() {
	var distance_for_asterix = $('#second-block').offset().top - $(window).height(),
		distance_end_asterix = $('#third-block').offset().top - $(window).height(),
		distance_for_boy = $('#fourth-block').offset().top - $(window).height(),
		distance_end_boy = $('#footer').offset().top - $(window).height(),
		$asterix = $('#asterix'),
		$boy = $('#design-boy'),
		$back_to_top = $('#top');

	$(window).scroll(function(){

		if  ($(window).scrollTop() > distance_for_asterix && $(window).scrollTop() < distance_end_asterix)
			$asterix.addClass('visible');
		else
			$asterix.removeClass('visible');

		if  ($(window).scrollTop() > distance_for_boy && $(window).scrollTop() < distance_end_boy) {
			$back_to_top.addClass('visible-not');
			$boy.addClass('visible');
		}
		else {
			$boy.removeClass('visible');
			$back_to_top.removeClass('visible-not');
		}
	});

});

Что то много лишнего кода скажите вы. Почему бы не объединить скрипт кнопки наверх и наши плавающие блоки? Не просто так я разделил эти два скрипта. Во первых на вашем сайте уже может существовать скрипт элемента TO TOP. Во вторых - может вы читаете эту статью только из за этого элемента;)

Если на сайте уже функционирует кнопка наверх - то наш второй блок с дизайнером будем накладываться на эту кнопку, значит мы допишем пару строк кода и будем скрывать мешающий нам элемент во время отображения дизайнера и вновь выводить при прокрутке до футера сайта.

Исходные коды полностью готовой страницы со стилями, скриптами и изображениями. Наслаждайтесь и пишите свои комментарии и вопросы.