如何在向下滚动到达另一个元素时隐藏一个元素？

Question

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

您的代码 solved.just 更改了 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();
});

如何在向下滚动到达另一个元素时隐藏一个元素？

How to hide an element when it has reached another element on scroll down?

javascript

jquery

scroll