Добавление липкого заголовка и подвала

Разработка
1

Привет, ребята,

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

Однако, пообщавшись с рекламным агентством, я узнал, что для достижения максимальной видимости рекламы на мобильных устройствах (а именно оттуда приходит большая часть моего трафика) лучше всего использовать «липкие» баннеры в шапке или подвале сайта.

Проблема, конечно, в том, что «липкий» баннер в подвале может перекрывать важные кнопки и ухудшать пользовательский опыт (UX), что недопустимо.

Есть ли способ добавить отступ снизу сайта, равный высоте баннера, чтобы «липкий» баннер не влиял на важные элементы UX? Я не хочу, чтобы пользователям приходилось закрывать рекламный баннер, прежде чем они смогут ответить или использовать счетчик постов для прокрутки вниз по теме.

Также, если в Discourse включена «липкая» шапка, повлияет ли на неё «липкий» баннер, или баннер может располагаться выше навигационной панели Discourse?

Или это задача, которую рекламное агентство должно решить с помощью своих рекламных технологий?

Спасибо,

Шейн

2

Я думаю, что можно добавить отступ снизу для body, чтобы липкий баннер с рекламой в футере не перекрывал кнопки ответа, а затем для всплывающего блока управления ответами, возможно, получится установить z-index, чтобы он появлялся поверх рекламного баннера?

Просто интересно, удалось ли кому-то успешно реализовать липкие баннеры с рекламой в шапке и/или футере на мобильных устройствах без ущерба для пользовательского опыта.

3

Привет :wave:

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

Я бы использовал плагин outlet и разместил баннер внутри него. Установите высоту plugin-outlet равной высоте баннера — это добавит необходимые отступы.

Что-то вроде этого. Примечание: это лишь быстрый пример, надеюсь, он даст вам идеи для реализации. Мы можем сделать больше, если вы предоставите дополнительную информацию и URL вашего сайта для проверки и т.д… :slightly_smiling_face:

Мобильная версия / Заголовок

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

Мобильная версия / CSS

body {
  --banner-height: 40px;
  
  .d-header-wrap {
    top: var(--banner-height);
  }

  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }

  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
  }  
}

4

Привет, @Don! Спасибо за ответ. Я думал, что, возможно, потребуется что-то вроде этого, и всё в порядке.

5

Привет, @Don! Как будет работать эта реализация, когда вы попытаетесь ответить с мобильного устройства?

6

Это работает, но верхний баннер делает область написания сообщения меньше.

Скорее всего, лучше скрывать баннер, когда область написания сообщения открыта.

Существует класс .composer-open, на который можно ориентироваться, чтобы скрыть баннер при открытии области написания сообщения.

Мобильные устройства / CSS 
body {
--banner-height: 40px;
  // Заголовок
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // Верхний баннер
  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    transition: height 0.25s ease-in;
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
      transition: height 0.25s ease-in;
      .composer-open & {
        height: 0;
      }
    }
    .composer-open & {
      height: 0;
    }
  }
  // Нижний баннер
  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  // Переместить обертку прогресса темы вверх от нижнего баннера
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // Добавить высоту баннера к расчету максимальной высоты области написания сообщения
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }  
}

Редактирование: Я внес некоторые исправления в код.

7

Ох, брат, огромное спасибо за эту помощь — просто великолепно!

8

Привет, @Don! У меня есть тестовая версия, которая отлично работает на мобильных устройствах. Сейчас добавляю её на десктоп, и вроде бы всё должно работать, но есть небольшая проблема: когда нажимаешь «Ответить», в отличие от мобильной версии, где область закрепления исчезает, на десктопе она остаётся на месте. Есть ли какой-то CSS-хук для открытия редактора на десктопе?

9

Привет, @Don! Не подскажешь, как закрыть футер на десктопе? Мобильная версия работает отлично, но я не могу понять, как убрать «липкий» элемент, когда открываешь поле ответа на десктопе, нажав «Ответить». Это выходит за рамки моих знаний в CSS.

Спасибо.

10

Привет @Shaneod :wave:

Извините за задержку. Код, который я написал выше, размещён в разделе для мобильных устройств, поэтому он работает только на мобильных. Я изменил код, чтобы он подходил и для настольных компьютеров. Вам нужно разместить этот код в общем разделе и удалить существующий из мобильного раздела.

Вот обновлённая версия, которая работает как на настольных компьютерах, так и на мобильных устройствах.

Общее / Заголовок 
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>
Общее / CSS 
body {
  --banner-height: 40px;
}

.d-header-wrap {
  top: var(--banner-height);
  transition: top 0.25s ease-in;
  .composer-open & {
    top: 0;
  }
}
  
.sidebar-wrapper {
  html:not(.composer-open) & {
    height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height));
  }
}

.above-site-header-outlet.top-banner {
  @include sticky;
  top: 0;
  width: 100%;
  height: var(--banner-height);
  transition: height 0.25s ease-in;
  z-index: z("header");
  .test-top-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
  .composer-open & {
    height: 0;
  }
}

.below-footer-outlet.bottom-banner {
  @include sticky;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  html:not(.composer-open) & {
    height: var(--banner-height);
  }
  z-index: z("composer", "content") - 1;
  .test-bottom-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
}
  
#topic-progress-wrapper:not(.docked) {
  margin-bottom: var(--banner-height);
  .composer-open & {
    margin-bottom: 0;
  }
}
  
body:not(.ios-safari-composer-hacks) #reply-control.open {
  max-height: calc(100vh - var(--header-offset) + var(--banner-height));  
}

11

Можно ли показывать рекламу Google в этих местах? @Don

12

Спасибо @Don, очень ценю, друг! :+1:

13

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