JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="root">

  <!--Неважная часть кода-->
  <div id="site_content">
    <p>Контент...</p>
  </div>

  <!-- Выше может находится что то еще, а ниже пишем: -->
  <!--Важная часть кода-->
  <div id='footer'>
    <div id="code-pluso">
      <p> » Кнопки SharePluso « </p>
    </div>
    <div id="share-box">
      <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
      <!--для того чтобы вышестоящий span отобразил иконку нужно подкл. файл стилей bootstrap:-->
      <!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css-->
      <span class="spanclick">Поделиться</span>
    </div>
  </div>

</div>

CSS

#site_content {
  position: relative;
  height: 300px;
  border: 5px solid #ccc;
  background: #fff;
}

#site_content p {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}

#root {
  position: relative;
  overflow: hidden; // скрываем все то, что может выйти за данный блок
}

#footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 50px;
  background: #0267b4;
}

#code-pluso {
  position: absolute;
  display: table;
  left: -9999px;
  opacity: 0;
  height: 50px;
  width: 100%;
}

#code-pluso p {
  text-align: center;
  color: #0267b4;
}

#share-box {
  display: table;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#share-box span,
#code-pluso p {
  display: table-cell;
  vertical-align: middle;
  padding: 5px;
}

#share-box span.glyphicon-thumbs-up {
  width: 50%;
  text-align: right;
}

.spanclick {
  color: #fff;
  text-decoration: underline;
}

#share-box .glyphicon-thumbs-up {
  color: #fff;
  font-size: 150%;
}

JavaScript

$('#share-box').on('click', function() {
  $(this).parents('#footer').animate({
    "bottom": "-55px"
  }, function() {
    $('#code-pluso').css({
      "opacity": "1",
      "left": "0"
    });
    $('#footer').css({
      "bottom": "0",
      "background": "#fff"
    });
    $('#share-box').hide();
  });
});