Как исправить поведение блока с position:fixed при скролле в мобильных браузерах?

Здравствуйте. Суть:
Есть блок с position: fixed. Изначально он прикреплен к верху страницы, но при нажатии на него требуется переместить его вниз.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html, body{
  padding: 0;
  margin: 0;
}

body{
    height: 200vh;
}

.block{
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background: #000;
  transition: 1s ease;
}

.active{
  top: 100%;
  transform: translateY(-100%);
}
</style>
</head>
<body>
  <div class="block"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script>
$(".block").on("click", function(){
  $(this).toggleClass("active")
})
  </script>
</body>
</html>


Все работает, но на мобильных браузерах, когда блок внизу, при скролле он"плывёт" выше или ниже. (f0457022.xsph.ru)

PS: Если при нажатии задавать свойство bottom:0, такого не происходит, но этот вариант не подходит, т.к. движение должно быть анимированным.
  • Вопрос задан
  • 274 просмотра
Пригласить эксперта
Ответы на вопрос 2
@aftar
Зачем transform: translateY(-100%);??
Ответ написан
kocherman
@kocherman
https://jsfiddle.net/zc49jnt0/1/

Вам надо использовать либо { bottom: 0; } либо { top: calc ( 100vh - 40px ); }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы