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

Скопируйте код и установите его в этом редакторе для наглядности примера.
<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>
#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.
Информация в самом блоке, соответственно Ваша.
Всем добра и до встречи.
Спасибо, Виктория! Счастливого лета!
ОтветитьУдалитьПожалуйста, Ирина. Лето всегда у нас счастливое и хлопотное.
ОтветитьУдалитьОчень смешная детская рожица в очках!
ОтветитьУдалитьСемён, да, прикольный мальчуган.
ОтветитьУдалитьКак всегда, спасибо! Пригодится))
ОтветитьУдалитьМаксимилиан Эдельман, и тебе спасибо за отзыв. Буду рада если пригодится
ОтветитьУдалить