Перейти к содержанию
  • Как добавить плавающий блок рекламы


    Sipsb

    Всё делается быстро и достаточно просто.

      1. Создаём блок под рекламу

    <div id="fixblock">
    <!-- тут должен быть ваш код рекламы -->
    </div>

      2. Добавляем стиль в Custom.css

    /* Плавающий блок рекламы */
    .sticky {
      position: fixed;
      z-index: 101;
    }
    .stop {
      position: relative;
      z-index: 101;
    }

      3. Добавляем скрипт в шаблон globalTemplat перед </body>

    <!-- Плавающий блок рекламы -->
    <script>
    (function(){
    var a = document.querySelector('#fixblock'), b = null, P = 0;  // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
    window.addEventListener('scroll', Ascroll, false);
    document.body.addEventListener('scroll', Ascroll, false);
    function Ascroll() {
      if (b == null) {
        var Sa = getComputedStyle(a, ''), s = '';
        for (var i = 0; i < Sa.length; i++) {
          if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
            s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
          }
        }
        b = document.createElement('div');
        b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
        a.insertBefore(b, a.firstChild);
        var l = a.childNodes.length;
        for (var i = 1; i < l; i++) {
          b.appendChild(a.childNodes[1]);
        }
        a.style.height = b.getBoundingClientRect().height + 'px';
        a.style.padding = '0';
        a.style.border = '0';
      }
      var Ra = a.getBoundingClientRect(),
          R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('footer').getBoundingClientRect().top + 120);  // селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент;  Math.round() только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
      if ((Ra.top - P) <= 0) {
        if ((Ra.top - P) <= R) {
          b.className = 'stop';
          b.style.top = - R +'px';
        } else {
          b.className = 'sticky';
          b.style.top = P + 'px';
        }
      } else {
        b.className = '';
        b.style.top = '';
      }
      window.addEventListener('resize', function() {
        a.children[0].style.width = getComputedStyle(a, '').width
      }, false);
    }
    })()
    </script>

     


    Обратная связь

    Рекомендуемые комментарии

    И на хрена огород городить? Если в движке уже все есть data-ipsSticky ??? https://invisionpower.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuisticky-r62/

    <div data-ipsSticky data-ipsSticky-relativeTo='.myClassRelativeTo' data-ipsSticky-disableIn='tablet,phone' data-ipsSticky-stickyClass='myStickyClass' data-ipsSticky-spacing='XX' data-ipsSticky-width='XXXpx'>
    	Реклама
    </div>

     

    Ссылка на комментарий
    Поделиться на другие сайты

    42 минуты назад, Respected сказал:

    мощная и гибкая штука

    Ну да. Важно свои css-классы задать, что бы под свои задачи подрегулировать.

    В принципе в движке есть довольно мощные и js фреймворк и ccss фреймворк. У них только одна проблема, изначально заточены под стандартный шаблон.

    зы. еще одно замечание к заметке. Так чиста для порядку.

    Цитата

    Добавляем скрипт в шаблон globalTemplat перед </body>

    не надо свои скрипты добавлять прямо в globalTemplat перед </body>. Если их станет много, замучаетесь.

    Лучше перед </body> вставить такой код

    {template="myFooterJS" app="core" group="global" params="$location"}

    и создать кастомный шаблон myFooterJS.phtml (название условное)

    <ips:template parameters="$location = array()" />

    и вставлять скрипты уже в него и его же редактировать при изменениях, а не globalTemplatе.

    Плюс, используя $location (или \IPS\Output::i()->bodyClasses или \IPS\Request::i() можно грузить скрипты только там, где нужно.

    Пример здесь скрипты грузятся только 1) если это приложение page (сms) и только там где заданы мои bodyClasses

    <ips:template parameters="$location = array()" />
    
    {{if $location['app'] == 'cms'}}
    
    	{{if in_array('mybodyClasses1', \IPS\Output::i()->bodyClasses ) OR in_array('mybodyClasses2', \IPS\Output::i()->bodyClasses ) OR in_array('mybodyClasses3', \IPS\Output::i()->bodyClasses )}}
    			<script type="text/javascript">
    				-------------------
    			</script>
    	{{endif}}
    
    {{endif}}

     

    Ссылка на комментарий
    Поделиться на другие сайты



    Присоединяйтесь к обсуждению

    Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
    Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

    Гость
    Добавить комментарий...

    ×   Вставлено с форматированием.   Вставить как обычный текст

      Разрешено использовать не более 75 эмодзи.

    ×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

    ×   Ваш предыдущий контент был восстановлен.   Очистить редактор

    ×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.


×
×
  • Создать...