How to make a jquery function run when a div is displayed on the screen

Question

In Short: I am working on a project and I want to run a function when a particular div is displayed on the screen.

Detail: There is a scroll to top button fixed on the bottom right of the screen in my template. I want to hide that button when someone scroll down to the footer. Means when someone scroll down to the footer and the top border of the footer is displayed on the screen, I want a function to run which would hide the go to top button.

Please help me out of this problem...

possible duplicate of [jQuery - Check if element is visible after scroling](http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling) — Andy E, Oct 17 '11 at 16:51
if you choose to use one of the answers by attaching to the scroll event, make sure you also use or implement throttle or you might see some client performance degradation due to the event handler executing (probably) far more often than you want it to — Kris Ivanov, Oct 17 '11 at 17:30
I made this example in JsFiddle but I see it was answered: http://jsfiddle.net/e3xLd/ — AturSams, Oct 17 '11 at 18:06
Thanks everyone for helping me. Especially Shusl and Arthur Wulf White — Jawad Hyder, Oct 18 '11 at 14:43

score 2 · Answer 1 · answered Oct 17 '11 at 17:06

Initialize the window to monitoring its scrolling

$(document).ready(function () {
    $(window).scroll(function () {
        // get the element that you want check scrolling on it
        var off = $("your-selector").offset().top; 
        var top = $(window).scrollTop() + $(window).height();
        if (off <= top) {
            // do your job
            // for example you can call a function like:
            my_method_to_invoke();
        }
    });
});

The function you want to invoke it:

function my_method_to_invoke() {
    // TODO
}

Anoop · Accepted Answer · 2011-10-17T17:25:36.287

2

$(document).ready(function() {
     var footer = $("footer");
     var f_top = footer.position().top;
      $(window).scroll(function() {
           if ($(window).scrollTop() + $(window).height() >= f_top ) {
                footer.hide();          
           }
           else{
              footer.show();          
           }
       });
    });

edited Oct 17 '11 at 17:25

answered Oct 17 '11 at 17:17

Anoop

23,044
10
62
76

score 0 · Answer 3 · answered Oct 17 '11 at 17:09

I think you'll need to register a scroll listener on the body that checks to see if the footer is in view and perform the hide if so. Something like this...

$(body).scroll(function () {
scrollCheck();
});

var scrollCheck = function () {
    var docTop, docBot, elemTop, elemBot;

    docTop = $(window).scrollTop;
    docBot = docTop + $(window).height();
    elemTop = $(<footer element>).offset().top;
    elemBot = elemTop + $(<footer element>).height();

    if ((elemBottom >= docTop) && (elemTop <= docBot)) {
         $(<button element).hide();
    }
}

How to make a jquery function run when a div is displayed on the screen

3 Answers3