Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

Доброго времени суток, друзья. Есть множество способов, для создания появляющегося и исчезающего блога при скроллинге страницы. Сегодня вашему вниманию представляю ещё один из вариантов. При прокрутке страницы в низ, появится блог с любой информацией и исчезнет при прокрутке обратно. Код простой и легко устанавливается на странице блога. 


выскальзывающий блок


Скопируйте код и установите его в этом редакторе для наглядности примера.

<style type="text/css"> body { min-height: 1000px; }
#blfix{
    display:none;
    position:relative;
    top:40;
    background-color:blu;
    width: 80%;
    padding: 70px;
}
</style>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<div id="blfix"><img src="https://wallpaperscave.ru/images/original/17/12-14/humor-child-3382.jpg" border="2" title="пояснительный текст " width=950 height=350> </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() > 200 ? 'In': 'Out')](500);
    });
});
</script>


В участке кода 

<div id="blfix"><img src="https://wallpaperscave.ru/images/original/17/12-14/humor-child-3382.jpg" border="2" title="пояснительный текст " width=950 height=350> </div>

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

Изменяя значение функции .scrollTop() > 200 ? 'In': 'Out')](500); можно подкорректировать расположение блока.

При применении на странице пишем сообщение в обычном режиме и, в том месте, где предполагается появление блока, переходим в режим HTML.
Информация в самом блоке, соответственно Ваша. 

Всем добра и до встречи.

6 комментариев:

  1. Спасибо, Виктория! Счастливого лета!

    ОтветитьУдалить
  2. Пожалуйста, Ирина. Лето всегда у нас счастливое и хлопотное.

    ОтветитьУдалить
  3. Очень смешная детская рожица в очках!

    ОтветитьУдалить
  4. Семён, да, прикольный мальчуган.

    ОтветитьУдалить
  5. Как всегда, спасибо! Пригодится))

    ОтветитьУдалить
  6. Максимилиан Эдельман, и тебе спасибо за отзыв. Буду рада если пригодится

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML