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

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

всплывающий блок при скроллинге страницы

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


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

<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


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

  1. Отличная полезность! Даже рекламу можно установить?

    ОтветитьУдалить
    Ответы
    1. Виктория, самое то для рекламных баннеров.

      Удалить
  2. Вроде бы я достаточно подробно разобрался с новым интерфейсом, тем более, что старый обещают отключить к 1 сентября. В остальном - без особых изменений.

    ОтветитьУдалить
  3. Семён, доработать бы им окончательно новый , всё равно косяки есть.

    ОтветитьУдалить
    Ответы
    1. Это точно! Причем они, заразы, постоянно какие-то мелочи переформатируют, пока додуешь. Перенесли плюсик справа налево, со шрифтами чего-й то начудили. А главное, лучше от этого не становится. Но зато можно отчитаться: коллефтив напряженно работает, пожальте премию!

      Удалить
  4. Семён, да за эти новшества кто - то действительно гребёт премиальные. Со шрифтами посмотрите в комментарии 10.а Александру ответила в этой статье http://www.shpargalochki.ru/2020/07/i-opyat-igry-s-novym-redaktorom.html

    ОтветитьУдалить
  5. классная штука, вот бы ещё сделать картинку кликабельной , и есть ли возможность сдвигать её вправа -влево?

    ОтветитьУдалить
  6. INTERINVEST, А что мешает сделать кликабельной. Элементарно. То что выделено розовым пишем
    <a href="адрес страницы куда должна вести ссылка" target=_blank><img src="адрес изображения " ></a>
    Со сдвигам вправо, влево играемся со значениями
    position:fixed;
    top:0;
    width: 50%;
    padding: 20px;

    http://htmlbook.ru/css/position

    ОтветитьУдалить
  7. Бывает. Пожалуйста.

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

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

Пользовательский поиск