JSFiddle - React, Tailwind, and code Playground

by webphp

HTML

<body>
  text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
  <div class="x--overlay hide" data-is-mobile=0>
    <div class="x--overlay__close"></div>
    <div class="mobile hide">Реклама для мобилки</div>
    <div class="desctop hide">Реклама для ПК</div>
  </div>
</body>

CSS

.x--overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  padding: 10px;
  background: orange;
  text-align: center
}

.x--overlay__close {
    position: absolute;
    right: 0;
    width: 30px;
    height: 30px;
    transition: all .3s ease-out;
    z-index: 1;
    top: -20px;
    cursor: pointer;
}
.x--overlay__close::after, .x--overlay__close::before {
    content: '';
    position: absolute;
    top: 10px;
    width: 14px;
    height: 3px;
    z-index: 2;
    background-color: #8f9cb5;
}
.x--overlay__close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}
.x--overlay__close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}
.hide {
  display: none
}

JavaScript

(function() {

  // Ищем мобилку в userAgent
	var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
  
  // Если cookie close нет, тогда показываем
  if (getCookie('close') === undefined) document.addEventListener("scroll", checkIfNearPosition)
 
  // Закрываем блок по клику на крестик
	document.querySelector('.x--overlay__close').addEventListener('click', function(e) {
  	// Скрываем блок
  	e.target.parentNode.style.display = 'none'
    // Сохранияем cookie close=1
    , document.cookie = "close=1; expires=" + n() + "; path=/"
    // Сносим обработчик
    , document.removeEventListener("scroll", checkIfNearPosition)
  })
  
  function checkIfNearPosition(e) {
    var x = document.querySelector('.x--overlay')
    	, offsetVisible = isMobile && 100 || 300
      , ___class = ['.desctop', '.mobile']
 
    // Создаем data-is-mobile - может пригодится для чего нибудь, например для CSS и увеличения высоты блока
 		x.setAttribute('data-is-mobile', +isMobile)
    // Раскроем блок в зависимости от устройства mobile|desctop
   	x.querySelector(___class[+isMobile]).style.display = 'block'
    // Раскроем блок если пролиснули страницу вниз на 100px для mobile, на 300px для desctop
    window.pageYOffset > offsetVisible && (x.style.display = 'block') || (x.style.display = 'none')
  }
  
  // Найдем нужную cookie
  function getCookie(name) {
    var matches = document.cookie.match(new RegExp("(?:^|; )" + 
    	name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));

		return matches ? decodeURIComponent(matches[1]) : undefined;
	}
  
  // Время жизни cookie
  function n() {
    var e = new Date;
    return e.setTime(e.getTime() + 63072e7), e.toUTCString()
	}
})()