A bit of a different question!

Does anyone know where there is either a plugin or point me in the right direction to create something like this: /

When you get to the end of an article a box appears in the bottom right hand side of the screen!

Any ideas?

Thanks Ricky

A bit of a different question!

Does anyone know where there is either a plugin or point me in the right direction to create something like this: http://mashable./2012/05/30/kings-social-media/

When you get to the end of an article a box appears in the bottom right hand side of the screen!

Any ideas?

Thanks Ricky

• javascript
• jquery
• html

• 1 It's relatively simple, Get the top position of the article container and it's height, then on scroll(of window), check to see if the scroll position is greater than the screen height minus the top of the article minus the article height. If that is true, show the dialog, else, hide it. Very similar to all of the semi-fixed position menus. – Kevin B Commented May 30, 2012 at 21:47
• What have you tried? Also, on a personal note, I hate those things. – josh3736 Commented May 30, 2012 at 21:54

2 Answers 2

A simple example from a blog I found:

function getScrollY() 
{
    var y = 0;
    y = document.body.scrollBottom;
    return y
}

Then use this as a .js include (similar to this JSFiddle I found):

(function($) 
{
    $area.scroll(function(e) 
    {
        if($(this).scrollBottom() < $('#divToShowBoxOn').offset().left)
            alert("Zomg you scrolled to my box!");
    }
})(jQuery)​

where area is the place you want to measure from

jQuery inView plugin is super awesome. Just put a div at the bottom of your page and when it es into view this handler will call your function.

http://remysharp./2009/01/26/element-in-view-event-plugin/