javascript - 在表单的高度隐藏粘滞按钮

Question

我有一个网页，我在其中使用了一个仅在移动设备上使用的粘性按钮

<div id="toBooking" class="bg-light d-lg-none d-xl-none">
<a class="btn_full" style="margin-bottom:0; background: #0072bc !important;" href="#"> <sup>$</sup> Book Now</a>
</div>

这是我的javascript

var pxBtShow = 500; // height on which the button will show
var scrollSpeed = 500; // how slow / fast you want the button to scroll to top.

$(window).scroll(function(){
 if($(window).scrollTop() >= pxBtShow){
    $("#toBooking").addClass('visible');
 } else {
    $("#toBooking").removeClass('visible');
 }
});

$("#toBooking").click(function() {
  $('html, body').animate({
    scrollTop: $("#booking").offset().top
  }, 1000);
});

和CSS

    #toBooking {
    position: fixed;
    right: 0;
    opacity: 0;
    visibility: hidden;
    bottom: 0px;
    z-index: 999;
    transition: 0.35s;
    transform: scale(0.7);
    width: 100%;
    height: 46px;
    background-color: rgba(0,0,0,.6);
    opacity: 1;
    transition: all 0.3s;
    border-radius: 50%;
    text-align: center;
    font-size: 21px;
    color: #fff;
    cursor: pointer;
}
#toBooking.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
#toBooking:after {
    content: "\e899";
    font-family: "fontello";
    position: relative;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-55%);
    transform: translateY(-55%);
}

当我点击按钮时，它会将我带到一个预订表格。但是当我在表单上时，我想在该表单的高度隐藏该按钮。

我们如何做到这一点？

Answer 1

您只需要添加更多逻辑例如:

$(window).scroll(function () {
    var windowScrollTop = $(window).scrollTop()
    var $form = $('#form');
    var formOffset = $form.offset();
    if (
        windowScrollTop >= pxBtShow &&
        windowScrollTop < formOffset.top &&
        windowScrollTop > formOffset.top + $form.height()
    ) {
        $("#toBooking").addClass('visible');
    } else {
        $("#toBooking").removeClass('visible');
    }
});