I enjoy simplicity, in everything. Unnecessary complexity is evil. Have a look at my WordPress plugins.

Scroll Triggered Box with jQuery

Last week I released Qoate Scroll Triggered Box, a plugin for WordPress which shows a box that slides in at a corner of the screen after you scrolled past a certain point on your pages. I built this plugin with just a few lines of jQuery. In this post I’ll explain how I did it.

Update (November 2013): Qoate Scroll Triggered Box is really oudated. Use my newer plugin called Scroll Triggered Boxes instead.

Actually, the Javascript part of this plugin is quite simple. Building the settings pages and building the plugin in a way users could set some parameters was harder than the actual core functionality: having a box slide in after scrolling down far enough.

If you’re just a little familiar with jQuery, you can do it.

The scroll() function

Because we want the box to display as soon as visitors scrolled far enough down a webpage, we’re going to listen to the scroll event. This event is fired when a user interacts with any scrollbar on the page or uses its mousewheel.

As with many events, jQuery provides us with an easy to way to hook a function to this scrolling event.

$(window).scroll(function(){
	// listener function goes here
});

Calculating the distance a user has scrolled down

With the code above, the function is fired everytime a user scrolls. In this function we should now check if a user has scrolled down far enough and if so, display our box. We can to this using the scrollTop() function on the jQuery window object. This will actually return how many pixes are hidden from view above the scrollable area, in this case the window.

Let’s just add the window height to this value, so we actually get the pixels hidden from view + the height of the window. We want to keep the function that listens to the scroll event as lightweight as possible so we don’t slow down the scroll experience for the user. Assuming the window height does not change, we can safely store it in a variable outside our listener function.

var windowHeight = $(window).height();

$(window).scroll(function(){
	var y = $(window).scrollTop() + windowHeight;
});

When to show the box: percentage or element

Now, we need to decide when is the right time to show our box. You could use a static height but as most of your pages will most likely have a different height, this is not the best thing to do. Another option is to use a percentage. If a user scrolled down to 50% of the page height, show the box.

var windowHeight = $(window).height();
var triggerHeight = 0.5 * windowHeight;

$(window).scroll(function(){
	var y = $(window).scrollTop() + windowHeight;

	if(y > triggerHeight) {
		// show the box
	}
});

Another option is to check if a user scrolled past a certain element, e.g. the comments section. Using jQuery, we can look up this element (let’s assume it has a #comments id) and check the offset from the top.

var windowHeight = $(window).height();
var triggerHeight = $("#comments").offset().top;

$(window).scroll(function(){
	var y = $(window).scrollTop() + windowHeight;

	if(y > triggerHeight) {
		// show the box
	}
});

So far so good, we can now write the rest of the code that shows the box. The HTML of the box is pretty straightforward and can look something like this. We set a display style of none, so the box will be hidden upon loading the page.

<div id="scroll-triggered-box" style="display: none;">
	<h3>Sign-up to our newsletter!</h3>
	<form>
	...
	</form>
</div>

To have this box show in a corner of the screen, give it a fixed position using CSS. To make sure it appears on-top, apply a high z-index as well.

#scroll-triggred-box{ 
	position: fixed;
	right: 0;
	bottom: 0;
	background: white;
	z-index: 99;
}

Fading in the box

Now, to actually show the box just use one of jQuery’s animation effects. In this example, we’ll have the box fade in.

var windowHeight = $(window).height();
var triggerHeight = 0.5 * windowHeight;

$(window).scroll(function(){
	var y = $(window).scrollTop() + windowHeight;

	if(y > triggerHeight) {
		// show the box
		$("#scroll-triggered-box").fadeIn('slow');
	}
});

That’s it, you just made your own scroll triggered box!

That’s all there is to it. The code I showed you in this post can be cleaned up a little, like removing the scroll listener function after we’ve showed the box. Also, the scrolling event fires a lot, it would be better to poll it a little so it only runs every 100-200 ms. John Resign (thé guy behind the jQuery library) actually wrote a nice post about this, talking about a problem at Twitter where any attempt to scroll made the site unbearably slow.

If you’re reading this, you probably noticed the box slide in at the bottom right corner of the screen. That’s the code you’re looking at, in action. Like it? Please subscribe then. :-)

Share this post: on Twitter on Facebook

Leave a Reply