Script affecting the div not linked to it

Issue

I am using this script to hide the header whenever I scroll down and show it again when I scroll up.

var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header").style.top = "0";
  } else {
    document.getElementById("header").style.top = "-55px";
  }
  prevScrollpos = currentScrollPos;
}

It's working fine.

But the same thing is happening to one more div whose code is given below:

<div class="pricing">
           <h2>Our Plans</h2>
<button type="button" name="button" class="commonBtn" id="bookBtn"> Buy Now</button>
</div>
<div id="book">
           <div id="closeBtn">
             x
           </div>
 <script type="text/javascript">
         var bookBtn = document.getElementById("bookBtn");
         var book = document.getElementById("book");
         book.style.bottom = "-1000px";
           bookBtn.onclick = function(){
             if (book.style.bottom=="-1000px") {
               book.style.bottom="-100px";
             }
         var closeBtn = document.getElementById("closeBtn");
               closeBtn.onclick = function(){
                 if (book.style.bottom=="-100px"){
                   book.style.bottom="-1000px";
                 }
               }
           }
           </script>

This book div is also showing a part of it when scrolled up and hiding when scrolled down.

Why is this happening and how can I solve it?

Thanks For Your Help In Advance.

PS: Its happening only in mobile devices. In Chrome DEV TOOLS also its working fine.

The Header Div

<header class="header" id="header">
      <nav class="sidebar" id="sidebar">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About Us</a></li>
     <li><a href="#">Plans</a></li>
     <li><a href="#">Offers</a></li>
     <li><a href="#">Sign Up</a></li>
     <li><a href="#">Contact Us</a></li>
     <li><div class="custom-control custom-switch">
       <input type="checkbox" class="custom-control-input" id="darkSwitch" />  </ul>
 </nav>
      <div class="container">
        <div class="masthead">
          <div class="mastheadLeft">
            <img src="image/logo.png" class="headerLogo">
          </div>
          <div class="mastheadRight">
            <div id="menuBtn">
                &#9776;
            </div>
          </div>
        </div>
      </div>
    </header>

CSS For Header and Book div.

#book{
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: -1000px;
  background: #0079e3;
  transition: 2s;
  z-index: 2;
}

.header{
  position: fixed;
  top: 0px;
  left:0px;
  right:0px;
  z-index: 10;
  background-color: #fff;
  transition: 0.5s;
}

Solution

The problem was with using pixels and percentage. The problem has been solved by using vh instead of px and %.

The Correct Code Is Given Below:

<script type="text/javascript">
         var bookBtn = document.getElementById("bookBtn");
         var book = document.getElementById("book");
         book.style.bottom = "-100vh";
           bookBtn.onclick = function(){
             if (book.style.bottom=="-100vh") {
               book.style.bottom="-100px";
             }
         var closeBtn = document.getElementById("closeBtn");
               closeBtn.onclick = function(){
                 if (book.style.bottom=="-100px"){
                   book.style.bottom="-100vh";
                 }
               }
           }
           </script>

#book{
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: -1000px;
  background: #0079e3;
  transition: 2s;
  z-index: 2;
}

This is correct javascript and css code. The Problem was in these two parts only rest all are fine.

Answered By - Subhodip Roy