Почему он сразу не обновляется?

274

16 августа 2017, 16:27

var header = document.querySelector('.navbar-header'); 
 
window.onload = function (){ 
 
	if (window.matchMedia("(max-width: 755px)").matches) { 
	  header.style.height =  '98px'; 
	} else { 
	  header.style.height =  'auto'; 
	} 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
	<!-- Optional theme --> 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
  <div class="container"> 
  <div class="row"> 
    <div class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
        <div class="navbar-header"> 
         <!--  <div class="line"></div> --> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
          </button> 
          <a class="navbar-brand" href="#"><span class="hidden-xs hidden-sm">Heshimovnotes</span> 
              <img src="img/notes.png" alt="Brand" class="hidden-lg hidden-md logo"> 
          </a> 
        </div> 
        <div class="collapse navbar-collapse" id="responsive-menu"> 
            <ul class="nav navbar-nav"> 
              <li><a href="#">punkt 1</a></li> 
              <li><a href="#">punkt 1</a></li> 
            </ul> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
   
   
   
   <!-- jQuery --> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
  <!-- Latest compiled and minified JavaScript --> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Вопрос такой.Написал такой хедер.Высота 98 пикселей при ширине 755 иначе автоматизированный(50 пикселей).Ну вот не понимаю почему при уменьшении дисплея в браузере оно не меняет размер?Нужно обновить страничку чтобы получить результат.можно ли это решить ?

Answer 1

Потому что проверка ширины и установка высоты хэдера происходят при загрузке страницы - в window.onload.

$(document).ready(function(){ 
  function CheckWidth() { 
    if (window.matchMedia("(max-width: 755px)").matches) { 
      $('.navbar-header').css("background-color", 'red'); 
    } else { 
      $('.navbar-header').css("background-color", 'green'); 
    } 
  } 
 
  $(window).resize(CheckWidth); 
  CheckWidth(); 
});

.navbar-header 
{ 
  width:100%; 
  height:60px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="navbar-header"></div>

Answer 2

А зачем вообще городить JS? Не проще ли решить эту задачу на CSS

.navbar-header {
  height: auto;
}
@media (max-width: 755px) {
  .navbar-header {
    height: 98px;
  }
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

скрыть меню html видео плеера

В любом HTML-плеере при клике правой кнопкой мыши на видео открывается меню, в котором это самое видео можно "открыть в новой вкладке" и, тем...

284

Выводить данные, если количество строк в результирующем SQL-запросе больше нуля

HTML

Почему он сразу не обновляется?

скрыть меню html видео плеера

Выводить данные, если количество строк в результирующем SQL-запросе больше нуля

Программа не выходит в главное окно

Дебаг SQL CLR функций в консольном приложении