CODEWITHSUNDEEP
javascriptjqueryscroll
Xeen
Xeen

Reputation: 7003

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

I have a fixed button on bottom: 0 that performs a scroll to another element, when clicked, but I need to hide it, when it reaches that element and make it appear again, when it scrolls over that element.

How could I do this with jQuery?

I've done this so far, but it isn't enough.

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

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

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

A rough estimate http://jsfiddle.net/ydbev5rq/5/

Upvotes: 1

Views: 1751

Answers (2)

Shikkediel
Shikkediel

Reputation: 5205

Works mostly as expected I think, just an incorrect selector for div2. Best to use $(window).scrollTop() or if you must $('html, body').scrollTop() by the way.

Update - adjustment for when toggling triggers :

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

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

Of course, using a $(this) when you can never hurts...

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

Upvotes: 2

Abhishek Pachal
Abhishek Pachal

Reputation: 554

With your code it's solved.just changed div2 id and made >= to < and div1.scrollTop() to offset().top.
Here is the js code

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

Upvotes: 0

Related Questions