Javascript 在特殊屏幕上隐藏底部按钮<；部门>；部分

我在手机页面底部显示了一个按钮

这是一个“立即预订”按钮。当我点击按钮时，请求进入表单

我不想要申请表上的“立即预订”按钮

这是按钮的CSS代码

    .bookNow {
color: #ffffff; /* You can change font color */
font-family: inherit;
font-size: 14px;  /* You can change font size */
font-weight: bold;
width: 100%; 
background-color: #008489; /* You can change color button */
cursor: pointer;
display: none;
text-align: center;
border-radius: 3px;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
padding: 10px 3%;
z-index: 10;
position: fixed;
bottom: 0px;
}


@media (max-width: 991px) {
    .bookNow {
    display: inline-block;
    display: block;
}

我使用下面的代码显示在页面上

<div><a href="#booking_box" class="bookNow">Booking</a></div>

我想在下面的div中隐藏这个按钮

<div id="booking_box">
here we have the form
</div>

这是表格

---

如何使用CSS或jquery实现这一点？

首先将

的id设置为具有

id=“booking\u box\u button”

，然后添加onclick处理程序

const bookingBox=document.getElementById（'booking_-box_-button'）；
bookingBox.onclick=function（）{
bookingBox.style.display='none'；
};

这将迫使它隐藏起来。如果希望在用户在页面上移动时再次显示，可以添加如下内容：

window.addEventListener（'scroll'，函数（e）{
bookingBox.style.display='block'；
});

单击后，它会隐藏，但当向上向下时，它仍会隐藏。可能需要获取要隐藏的部分之前的高度，而不是获取要隐藏的div的高度，而不是显示其余部分。请参阅更新以处理用户滚动时的更改。如果我们单击该按钮，您将获得解决方案。谢谢你的努力。我也看到了它也开始以正常尺寸出现。通常我们只在手机尺寸上显示该按钮