0

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

#overnavbar {
  opacity: 0;
  position: fixed;
  top: -70px;
  left: 0;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background: rgba(72, 172, 67, .95);
  display: none;
  z-index: 1100;
  box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  font-family: arial;
  color: #fff;
  font-size: 20px;
}
#navlogo {
  float: left;
  margin-right: 10px;
}
#navtel {
  float: left;
  line-height: 60px;
  border-left: 1px solid #319135;
}
#navtel div {
  padding: 0 16px 0 42px;
  border-left: 1px solid #6ec767;
  white-space: nowrap;
}
#navlogo img {
  vertical-align: middle;
  padding: 8px 69px;
  display: block;
  border-left: 1px solid #6ec767;
}
<div id="overnavbar" style="display: block;">
  <div style=" left: 50%;margin:0 auto;">
    <a id="navlogo" href="/">
      <img src="../dop/top/logo.png" alt="">
    </a>
    <div id="navtel">
      Заказать по телефонам: &nbsp 8 (495) 946 97 92,&nbsp 8 (800) 775 11 82
    </div>
  </div>
</div>

1 ответ 1

1

Решил все таким образом

$("#parent").show("slow")
$(document).ready(function() {
  $(window).scroll(function() {
    var bo = $(this).scrollTop();
    var a = $("#parent").css('opacity')
    if (bo >= 200 && a == 0) {
      $("#parent").stop().animate({
        'opacity': '1',
        'top': '0'
      })
    };
    if (bo < 200 && a == 1) {
      $("#parent").stop().animate({
        'opacity': '0',
        'top': '-70px'
      })
    };
  })
})
#parent {
  position: fixed;
  width: 100%;
  height: 60px;
  opacity: 0;
  top: 0px;
  left: 0px;
  overflow: auto;
  background: url(bgtop.png) repeat-x;
  box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
#block {
  text-align: justify;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
block.img {
  height: 50px;
  display: block;
  margin: 0 auto;
  border: none;
}
.text {
  font-size: 20px;
  margin-left: 300px;
  color: white;
}
<div id="parent">
  <div id="block">
    <img src="../dop/top/logo.png" alt="" />
    <div class="text">Заказать по телефонам: &nbsp 8 (495) 946 97 92,&nbsp 8 (800) 775 11 82</div>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.