0

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

Описание того, что уже есть:

Есть три блока: шапка - меньше всего информативный блок и ним можно жертвовать, центр - блок важен, но тоже жертвую и футер - самый информативный блок и по необходимости он закрывает все остальные. Шапка прижата вверху страницы, футер прижат к низу. При развернутом окне браузера цент будет всегда находится посередине между футером и шапкой. Если сузить окно браузера, то по степени информативности блоки будут закрывать один одного плавно и красиво. Футер будет налазить на центр, при этом центр будет от него "убегать", закрывая собой шапку, но в итоге футер закроет все, т.к. он самый важный. Теперь на футере появились кнопки вверх и вниз, которые поднимают/опускают его. При этом центр "старается" все равно оставаться в центре между шапкой и футером. С поднятием футера все выше, центр "убегает" от него, закрывая собой шапку, но футер продолжает подыматься, закрывая собой цент. Есть поднять 3-4 раза, а потом опустить 3-4 раза, то все выглядит очень красиво и так как я хотел. Но если поднимать в самый вверх, появляются проблемы.

Постановка этой задачи:

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

Вторая проблема, когда после полного поднятия начинать опускать футер, то центр уже не "станет на свое место".

3-я проблема. Даже если поднять футер на 3-4 раза, а потом изменить высоту окна браузера и опустить/поднять, то центр, тоже уже "не станет на место".

Уверен, что должно быть правильное решение задачи. Если я хочу "заоблачного" и решения нет, тогда подскажите, как наиболее эстетично решить мои проблемы. Заранее благодарен.

$('#footer').on('click', '#up_footer', function() {
		var height = $("#footer").height() + 30;
		if(height >= $("body").outerHeight()) return;
		else{
			$("#footer").animate({'height': height});
			if($(".center").outerHeight() >= $("body").outerHeight() + 15) return;
			else $(".center").animate({'padding-bottom': parseInt($(".center").css("padding-bottom")) + 15});
		}
    });
	
	$('#footer').on('click', '#down_footer', function() {
		var height = $("#footer").height() - 30;
		if(height < 100) return;
		else{
			$("#footer").animate({'height': height});
			$(".center").animate({'padding-bottom': parseInt($(".center").css("padding-bottom")) - 15});
		}
    });
* {
  margin: 0;
  padding: 0;
  font-family: Tahoma;
}

html,
body,
.wrapper {
  height: 100%;
}

body,
.wrapper {
  background-color: #F8E5DB;
}

.wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto 0 auto;
}

header {
  width: 100%;
  height: 45px;
  text-align: center;
  padding-top: 5px;
  border-bottom: 1px solid #6F6748;
  box-shadow: 0px 2px 3px 1px #9b9b9b;
}

.footer {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 207px;
  padding-bottom: 7px;
  margin-bottom: 19px;
  background-color: #402000;
  box-shadow: 0px -2px 3px 0px #9b9b9b;
  border-top: 1px solid #6F6748;
  border-radius: 5px;
}

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 17px;
  text-align: center;
  color: #606060;
}

footer p {
  font-size: 90%;
  font-family: Arial, sens-serif;
  letter-spacing: 0.01em;
}

#up_footer		{ background: url("../img/up.png"); 	}
#down_footer	{ background: url("../img/down.png"); 	}

#up_footer,
#down_footer{
	float: left;
	width: 150px;
	height: 20px;
	margin: 5px;
	cursor: pointer;
  border: 1px solid #000;
  text-align: center;
  background-color: #ce0000; 
  color: #efffbf;
  font-size: 80%;
}

.center {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 280px);
  padding-bottom: 230px;
}

.wrap_border_center{
	height: 304px;
	box-shadow: 0px 3px 5px 0px #9b9b9b;
	border: 5px solid #402000;
	border-radius: 5px;
   background-color: #FFCA95;
}

.centered-middle{
	width: 100%;
	height: 100%;
}

@media (max-height: 550px) {
  .center {
    height: calc(100% - 243px);
    padding-bottom: 213px;
  }
  .footer {
    margin-bottom: 10px;
  }
}

@media (max-height: 477px) {
  .center {
    height: calc(100% - 230px);
    padding-bottom: 230px;
  }
  .footer {
    margin-bottom: 0px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrapper">
  <header>
    <h1>ШАПКА</h1>
  </header>
  <div class="center">
    <table class="centered-middle">
      <tr valign="middle">
        <td>
          <div class="wrap_border_center">
            центр
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="footer" id="footer">
    <div class="updown">
			<div id="down_footer" title="Опустить вних">Опустить вних</div>
			<div id="up_footer" title="Поднять вверх">Поднять вверх</div>
		</div>
  </div>
  <footer>
    <p>информация</p>
  </footer>
</div>

1 ответ 1

1

var overIncrement = 0; // для ловли избытка в смещении, когда .center уже не сдвигается выше

$('#footer').on('click', '#up_footer', function() {
  var height = $("#footer").height() + 30;
  var bodyHeight = $("body").outerHeight();

  if(height < bodyHeight) {
    var differentH = bodyHeight - $(".center").outerHeight();
    if(differentH > 0) {
      var resultPadding = 0;
      differentH >= 15 ? resultPadding = 15 : resultPadding = differentH; // Проверяем, не больше ли 15 нужный отступ
      $(".center").css('padding-bottom', parseInt($('.center').css('padding-bottom')) + resultPadding);
    } else {
      overIncrement++;
    }

    $("#footer").css('height', height);
  }
});
  
$('#footer').on('click', '#down_footer', function() {
  var height = $("#footer").height() - 30;
  if(height >= 100) {
    if(overIncrement === 0) {
      $(".center").css('padding-bottom', parseInt($(".center").css("padding-bottom")) - 15);
    } else {
      overIncrement--;
    }
    $("#footer").css('height', height);
  }
});
* {
  margin: 0;
  padding: 0;
  font-family: Tahoma;
}

html,
body,
.wrapper {
  height: 100%;
}

body,
.wrapper {
  background-color: #F8E5DB;
}

.wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto 0 auto;
}

header {
  width: 100%;
  height: 45px;
  text-align: center;
  padding-top: 5px;
  border-bottom: 1px solid #6F6748;
  box-shadow: 0px 2px 3px 1px #9b9b9b;
}

.footer {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 207px;
  padding-bottom: 7px;
  margin-bottom: 19px;
  background-color: #402000;
  box-shadow: 0px -2px 3px 0px #9b9b9b;
  border-top: 1px solid #6F6748;
  border-radius: 5px;
  transition: all .3s ease;
}

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 17px;
  text-align: center;
  color: #606060;
}

footer p {
  font-size: 90%;
  font-family: Arial, sens-serif;
  letter-spacing: 0.01em;
}

#up_footer    { background: url("../img/up.png");   }
#down_footer  { background: url("../img/down.png");   }

#up_footer,
#down_footer{
  float: left;
  width: 150px;
  height: 20px;
  margin: 5px;
  cursor: pointer;
  border: 1px solid #000;
  text-align: center;
  background-color: #ce0000; 
  color: #efffbf;
  font-size: 80%;
}

.center {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 300px);
  padding-bottom: 230px;
  transition: all .3s ease;
}

.wrap_border_center{
  height: 304px;
  box-shadow: 0px 3px 5px 0px #9b9b9b;
  border: 5px solid #402000;
  border-radius: 5px;
   background-color: #FFCA95;
}

.centered-middle{
  width: 100%;
  height: auto;
}

@media (max-height: 550px) {
  .center {
    height: calc(100% - 243px);
    padding-bottom: 213px;
  }
  .footer {
    margin-bottom: 10px;
  }
}

@media (max-height: 477px) {
  .center {
    height: calc(100% - 230px);
    padding-bottom: 230px;
  }
  .footer {
    margin-bottom: 0px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="wrapper">
  <header>
    <h1>ШАПКА</h1>
  </header>
  <div class="center">
    <table class="centered-middle">
      <tr valign="middle">
        <td>
          <div class="wrap_border_center">
            центр
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="footer" id="footer">
    <div class="updown">
			<div id="down_footer" title="Опустить вних">Опустить вних</div>
			<div id="up_footer" title="Поднять вверх">Поднять вверх</div>
		</div>
  </div>
  <footer>
    <p>информация</p>
  </footer>
</div>

Здесь не нужно использовать .animate() - это излишество. Просто добавляем transition: all .3s ease; к #footer и .center , и меняем animate() на css(). То, что можно сделать средствами css - лучше делать им.

1-ая проблема: .center изменил с 280px на 300px, проблема была в том, что у тебя в классе .centered-middle была высота 100% (изменил на auto). Здесь у тебя есть таблица, которая была "не прижата" к самому верху (к бордеру) и оставалось свободное место из-за calc(100% - px). Так же переписал проверку на отступ (см комментарии в коде).

2-ая проблема: добавил overIncrement, что бы отлавливать избыточный сдвиг. (возможны погрешности на 2-3 пикселя, т.к. последний сдвиг может быть меньше 15)

3-я проблема: тебе поможет функция .resize() на window. Здесь очень много хардкода с вычислением высоты через css и можно повязнуть на несколько часов, так что все в твоих руках :)

P.S. Переписал if(!cond) {return;} else {...} на if(cond) {...}, т.к. это лишние строки кода, которые ухудшают читаемость и не используются. Задача индивидуальна и вряд ли поможет кому-то еще. Но надеюсь, что тебе помог мой ответ.

1
  • не идеал, но все же стало намного лучше чем было, за что Вам огромное спасибо. Спасибо, что указали на погрешности. Мне еще многому стоит учится. 9 апр 2017 в 6:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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