在向下滾動到達另一個元素時如何隱藏它？

Question

我在bottom: 0有一個固定按鈕bottom: 0 ，單擊該按鈕可滾動到另一個元素，但是當它到達該元素時，我需要將其隱藏，並在滾動到該元素上時再次顯示它。

我該如何使用jQuery ？

到目前為止，我已經做到了，但這還不夠。

function hideScroller () {
    div1 = $('#form');
    div2 = $('#slide-to-contacts');

    div1FromTop = div1.offset().top;
    div2FromTop = $('body').scrollTop();

    if (div1FromTop <= div2FromTop) div2.hide();
    else div2.show();
  }

粗略估算http://jsfiddle.net/ydbev5rq/5/

Answer 1

我的工作原理大致符合我的預期，只是div2的選擇器不正確。 最好使用$(window).scrollTop()或者必須使用$('html, body').scrollTop() 。

更新-調整觸發觸發器的時間：

http://jsfiddle.net/ydbev5rq/7/

div2FromTop = $(window).scrollTop()+$(window).height();

當然，在永遠不會受傷的情況下使用$(this) ...

div2FromTop = $(this).scrollTop()+$(this).height();

Answer 2

使用您的代碼即可解決。只需更改div2 id並將> =更改為<並將div1.scrollTop（）更改為offset（）。top。
這是js代碼

function hideScroller() {
    div1 = $('#form');
    div2 = $('#scroll-to-contacts');

    div1FromTop = div1.offset().top;
    div2FromTop = $('#scroll-to-contacts').offset().top;

    if (div1FromTop < div2FromTop) div2.hide();
    else div2.show();
}
$(document).ready(function () {
    //hideScroller();
    form = $('#form');
    $('#scroll-to-contacts').click(function () {
        $('html, body').animate({
            scrollTop: form.offset().top
        }, 1000);
    });
});
$(window).scroll(function () {
    hideScroller();
});