Залипание рекламы при прокрутке с помощью affix в bootstrap

Как то долго у меня не получалось запилить прилипашку на своих самописах. Вроде все по инструкции делал, а не получалось. Как оказалось позже я просто когда генерировал стиль бутстрапа оптимизировал и тупо отключил библиотеку афикса. Вот и не работало )))

Но тут на очередном витке потребности в фиксации рекламного блока таки добил эту тему. Короче по шагам.

<head>
  <title>Пример affix в bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  	.affix {top: 0; width: 100%;}
  </style>
</head>

Подключаем все нужные библиотеки в хидере страницы. Там же прописываем стиль для блока в состоянии фиксации. Я тут прописал что он будет приклеен прям вверх страницы - top: 0; и растянут на всю ширину родительского блока width: 100%;

Без этого стиля ни чего работать не будет. Так что хоть такой но нужно прописать. Далее вставляем блок, который будем фиксировать.

<span id="myNav"> а тут реклама!!! та дам!</span>

Лучше его выделить в отдельный div или ни чего не меняющий span, что бы не изменять базовую верстку страницы.

Далее вызываем сам афикс при помощи скрипта. В бутстрапе его можно вызвать и при помощи тегов, вернее классов, но там нужно четко знать координаты позиции блока. У меня же блок всегда на разной высоте, поэтому ее приходится вычислять. Поэтому java script внутри <body>...</body>

    <script>
        $(document).ready(function () {
            $("#myNav").affix({
                offset: {
                    top: function () {return (this.top = $("#myNav").offset().top)}
                }
            });
        });
    </script>

Обратите внимание на вот эту строчку top: function () {return (this.top = $("#myNav").offset().top)}. Именно она вычисляет текущее положение нашего рекламного блока от начала страницы и только с этого момента включает фиксацию. Благодаря этому получается залипание в продолжение прокрутки.

Вроде как бы на этом и все. Но мы то живем в век мобильных технологий. Если посмотреть такую страницу с мобильного, то блок рекламы залипнет в самый неподходящий момент и нагло перекроет собой контент. Что есть не хорошо и повод для санкций поисковиков. Поэтому допиливаем код еще немного.

    <script>
        $(document).ready(function () {
	var bvw=document.getElementsByTagName("body")[0].offsetWidth;
	if ( bvw >= 1000 ){
            $("#myNav").affix({
                offset: {
                    top: function () {return (this.top = $("#myNav").offset().top)}
                }
            });
	}
        });
    </script>

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

Скрипт можно допиливать еще дальше. Тут срабатывает только событие фиксации блока. Можно еще обрабатывать событие когда фиксация снимается при достижении нижней черты и включается обратно при прокрутке вверх. Да еще много чего можно обрабатывать, но для основы этого скриптика хватает. Дальше уже сами копайте если есть необходимость.

Add a Comment

Ваш e-mail не будет опубликован.