Есть ли способ предотвратить изменение размера на сенсорных устройствах? Моя проблема в том, что что, если у меня есть раздел, высота которого 60vh
. Этот раздел находится вверху страницы. Когда пользователь начинает прокрутку, адресная строка исчезает из окна, и браузер обновляет модуль vh
(если я прав).
< Сильный > index.html
<section class="top-section">
<!-- lots of code here -->
</section>
< Сильный > style.css
.top-section {
height:60vh;
}
Есть ли способ исправить это в CSS, или нет другого способа и использовать для этого Javascript.
2 ответа
Если вы говорите о создании верхней панели (с навигационными кнопками и прочим), самый правильный способ скрыть фиксированный элемент - использовать JS.
У вас есть два варианта:
Вариант 1) иметь относительную верхнюю планку. и он будет прятаться при прокрутке
вариант 2) исправить это, но с помощью слушателя (scrollTop ()) решить, когда открывать / закрывать верхнюю панель.
Я сделал пример для тебя. значение 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>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.