CSS-модуль на сенсорных устройствах

Question

Есть ли способ предотвратить изменение размера на сенсорных устройствах? Моя проблема в том, что что, если у меня есть раздел, высота которого 60vh. Этот раздел находится вверху страницы. Когда пользователь начинает прокрутку, адресная строка исчезает из окна, и браузер обновляет модуль vh (если я прав).

< Сильный > index.html

<section class="top-section">
 <!-- lots of code here -->
</section>

< Сильный > style.css

.top-section {
  height:60vh;
}

Есть ли способ исправить это в CSS, или нет другого способа и использовать для этого Javascript.

javascript android ios css

0

cs.matyi 24 Апр 2017 в 15:24

Answer 1

Если вы говорите о создании верхней панели (с навигационными кнопками и прочим), самый правильный способ скрыть фиксированный элемент - использовать JS.

У вас есть два варианта:

Вариант 1) иметь относительную верхнюю планку. и он будет прятаться при прокрутке
вариант 2) исправить это, но с помощью слушателя (scrollTop ()) решить, когда открывать / закрывать верхнюю панель.

1

Mik 24 Апр 2017 в 12:30

Answer 2

Я сделал пример для тебя. значение vh не меняется, если вы добавляете / удаляете элементы. он будет изменяться только при изменении размера экрана, а не при изменении размера документа. см. фрагмент ниже (высота верхнего раздела будет отображаться при прокрутке в виде текста внутри раздела, и он не меняется) или jSFiddle

$(window).on('scroll',function(){
 			if ( $(this).scrollTop() > 0 ) {
				$(".address-bar").hide()
			}else{
				$(".address-bar").show()
			}
	$(".top-section").text($(this).height())

});

.address-bar {
	height:5vh;
	background:blue;
}
.top-section {
	height:60vh;
	background:red;
}
.content-section {
	height:100vh;
	background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="address-bar">
	
</section>
<section class="top-section">

</section>
<section class="content-section">

</section>

1

Mihai T 24 Апр 2017 в 12:35

CSS-модуль на сенсорных устройствах

2 ответа

Похожие вопросы

Новые вопросы

javascript