Как установить фиксируемый модуль на сайте

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

О размещении плавающего модуля на сайте, можно почитать в этой статье. А в этой статье Вы узнаете, как разместить фиксируемые модули в правой и в левой колонках сайта одновременно.

Идею для размещения фиксируемого модуля увидел на одном из сайтов, мне показалось это интересным, поэтому изобретать велосипед не стал. Другие варианты размещения фиксируемых модулей можно найти на этом сайте http://shpargalkablog.ru/2013/09/scroll-block.html.

Ниже будут описан варианты с размещением двух фиксируемых модулей в правой и левой колонках.

Есть два варианта размещения фиксируемого модуля:
1. С загрузкой скрипта на всех страницах сайта;
2. С загрузкой скрипта на страницах, где будет показываться фиксируемый модуль.

Рассмотрим оба варианта.

1. Установка фиксируемого модуля с загрузкой скрипта на всех страницах сайта

Этот вариант лучше использовать, если фиксируемый модуль надо показывать на всех страницах сайта или на страницах одного шаблона.

Для реализации этого варианта есть два решения, разместить код скрипта в файле шаблона сайта или в отдельном файле js.

1 вариант

Добавляем перед закрывающим тегом </body> следующие стили и код скрипта:

<style>
.sticky{position: fixed;z-index: 101;}
.stop{position: relative;z-index: 101;}
@media (max-width: 700px){
#aside1, #aside2, .sticky{
position:relative !important;
overflow:hidden;
}
}
</style>
<script type="text/javascript">
Array.prototype.slice.call(document.querySelectorAll('#aside1 > div:nth-child(1), #aside2 > div:nth-child(1)')).forEach(function(a) {
var b = null, P = 10;
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('#content').getBoundingClientRect().bottom + 0);
  if ((Ra.top - P) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop';
      b.style.top = - R +'px';
      b.style.left = 0;
    } else {
      b.className = 'sticky';
      b.style.top = P + 'px';
      b.style.left = Ra.left + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
    b.style.left = '';
  }
  window.addEventListener('resize', function() {
    a.children[0].style.width = getComputedStyle(a, '').width;
    b.style.left = (b.className == 'sticky' ? (a.getBoundingClientRect().left + 'px') : '0');
  }, false);
}
})
</script>

P = 10 - можно изменить величину отступа от верхнего края

2 вариант

Добавляем перед закрывающим тегом </body> стиль и ссылку на скрипт js (адрес /templates/js/fixmod.js, где будет размещен файл js, у каждого свой, не забудьте его изменить!).

<style>
.sticky{position: fixed;z-index: 101;}
.stop{position: relative;z-index: 101;}
@media (max-width: 700px){
#aside1, #aside2, .sticky{
position:relative !important;
overflow:hidden;
}
}
</style>
<script src="/templates/js/fixmod.js"></script>

А в созданный файл fixmod.js надо будет добавить строки скрипта без тегов , т.е. все, что находится между этими тегами <script type="text/javascript"> и </script>.

Следующим шагом, в соответствующих местах шаблона сайта надо будет добавить следующие строчки:

Для левой колонки

<div id="aside1">
<div><jdoc:include type="modules" name="fixmod1" style="left"  /></div>
</div>

Для правой колонки

<div id="aside2">
<div><jdoc:include type="modules" name="fixmod2" style="right" /></div>
</div>

Не забудьте прописать в файле templateDetails.xml
<position>fixmod1</position>
<position>fixmod2</position>

и заменить или прописать style="left" и style="right" стиль модулей.

Если Вы соберетесь изменить имена aside1 и aside2, то замените их и в тексте скрипта.

В коде скрипта есть селектор #content
Для каждого сайта селектор #content свой!!! Это блок, вдоль которого фиксируются наши модули aside1 и aside2, это средняя часть страницы сайта.

Затем, в админке сайта создаем модули "Баннер" или "HTML".
Настройку оформления фиксируемого модуля делаем в файле стиля .css

Пример с двумя фиксируемыми баннерами можно посмотреть на сайте про отдых https://npo-otdyh.ru.

Важно!

Для адаптивного сайта добавил стиль, чтобы на мобильном устройстве фиксируемый модуль не глючил и работал, как обычный модуль.
Величину 700px подбираем под свой сайт, когда содержимое выводится в одной колонке.

@media (max-width: 700px){
#aside1 .sticky, #aside2 .sticky{
position:relative !important;
overflow:hidden;
}
}

2. Установка фиксируемого модуля с загрузкой скрипта только на выбранных страницах сайта

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

На этом сайте используется именно этот вариант, только для одного фиксированного модуля! Посмотреть, как он работает можно здесь.

Размещаем в соответствующих местах шаблона сайта следующие строчки:

Для левой колонки

<div id="aside1">
<div><jdoc:include type="modules" name="fixmod1" style="left"  /></div>
</div>

Для правой колонки

<div id="aside2">
<div><jdoc:include type="modules" name="fixmod2" style="right" /></div>
</div>

Затем идем в админку сайта и создаем модули "HTML", в HTML коде одного модуля прописываем стили, код скрипта и код выводимой информации в фиксируемом модуле. В коде второго модуля прописываем только код выводимой информации.

Пример кода информации можно посмотреть в описании к плавающему модулю.

Если после сохранения модуля, скрипт будет слетать, то настройте или отключите плагин "Редактор - TinyMCE".
После сохранения модуля, плагин можно будет включить, но открывать модуль со скриптом будет нельзя, так как после этого может исчезнуть код скрипта.

Яндекс.Метрика
© 2014-2017 "Сашкин Дом" Все права защищены
"Сашкин Дом" - недорогие сайты и сопровождение