появление блока при прокрутке страницы

Доброго времени суток, друзья. Вы видели на некоторых сайтах, когда при прокрутке страницы вниз, появляется вдруг блок с какой - то информацией. Это может быть баннер, картинка или просто объявление или пожелание. Любая информация.

В Блоггере такой вариант появления блога в сайдбаре очень легко реализовать. Для примера я взяла просто картинку, когда при скроллинге страницы она появляется в нужном месте. Если прокрутка опять идёт в верх, блок исчезает. Сразу посмотрите на тестовом блоге сам пример в сайдбаре (прокрутите страницу)

Демонстрация 

Нам понадобится совсем не большой  код.

<style type="text/css">
body { min-height: 1500px; }
#blfix{
    display:none;
    position:fixed;
    top:0;
    width: 50%;
    padding: 20px;
}
</style>

<div id="blfix"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="200" /> </div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(function(f){
    var element = f('#blfix');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 1600 ? 'In': 'Out')](800);         
    });
});
</script>

В строках, отмеченных розовым цветом, адрес картинки. В этом месте, как я уже писала выше, можно установить всё что угодно.

Так же расстояние появления блока 1600  меняйте на нужное вам.

Сегодня всё. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email