How to fix position:fixed block behavior when scrolling in mobile browsers?

V

Vladislav Dyuzhev2020-07-26 19:24:17

css

Vladislav Dyuzhev, 2020-07-26 19:24:17

Hello. Essence:
There is a block with position: fixed. Initially, it is pinned to the top of the page, but when you click on it, you need to move it to the bottom.

<!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>

Everything works, but on mobile browsers, when the block is at the bottom, it "floats" higher or lower when scrolling. ( f0457022.xsph.ru )

PS: If you set the bottom:0 property when clicking, this does not happen, but this option is not suitable, because movement must be animated.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

aftar, 2020-07-26
@aftar

Why transform: translateY(-100%);??

K

kocherman, 2020-07-26
@kocherman

https://jsfiddle.net/zc49jnt0/1/
You need to use either { bottom: 0; } or { top: calc ( 100vh - 40px ); }