Javascript 影响Div的脚本未链接到它

每当我向下滚动时，我使用此脚本隐藏标题，当我向上滚动时，再次显示标题

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

很好用

但同样的事情也发生在另一个div上，其代码如下所示：

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

---

问题在于使用像素和百分比。通过使用

vh

而不是

px

和

%

解决了该问题

正确的代码如下所示：

<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;
}

var bookBtn=document.getElementById（“bookBtn”）；
var book=document.getElementById（“book”）；
book.style.bottom=“-100vh”；
bookBtn.onclick=函数（）{
if（book.style.bottom==“-100vh”）{
book.style.bottom=“-100px”；
}
var closeBtn=document.getElementById（“closeBtn”）；
closeBtn.onclick=函数（）{
if（book.style.bottom==“-100px”）{
book.style.bottom=“-100vh”；
}
}
}
#书{
宽度：100%；
高度：100vh；
位置：固定；
底部：-1000px；
背景#0079e3；
过渡：2s；
z指数：2；
}

---

这是正确的javascript和css代码。问题出在这两个部分，只有其余部分都可以。

在您的案例中，使用百分比（%）或视口高度/宽度（vw/vh）而不是px可能更好。您需要分享更多的信息code@Vova我也尝试过

%

。事实上，一开始我使用了%，然后我看到事情发生了，我想

px

可能会有帮助。@gpl我应该共享什么样的代码？@subodiproy您的css和header 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;
}

<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;
}