Jump to content

Как добавить плавающий блок рекламы

Sipsb

By 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>

 

    • Go to записи

    User Feedback

    Recommended Comments

    kgb Experienced

    kgb

    Актив

    И на хрена огород городить? Если в движке уже все есть 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>

     

  • Цитата
    • kgb Experienced

    kgb

    Актив
    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}}

     

  • Цитата

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

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