Scroll Triggered Box with jQuery
Last week I released a Scroll Triggered Box plugin for WordPress, which I coded with jQuery. Are you wondering how this can be done?
It’s quite easy actually. It was more difficult to make it so that users could change some parameters, then the actual coding itself.
If you’re a little into jQuery I’m sure you’ll find yourself capable of making one yourself.
The scroll() function
Cause we want the box to appear as soon as the visitor scrolled past a certain point on your webpage we’re going to apply a function to the jQuery scroll() event.
The scroll event is sent to an element when the user scrolls, whether that be in the window or in scrollable objects (overflow:scroll or frames).
There are multiple ways to bind something to the scroll event, but let’s just take the easiest/shortest way possible.
$(document).ready(function(){
$(window).scroll(function(){
});
});
As you can see we wrapped this inside a (document).ready function, this is quite common for most jQuery scripts. Everything inside the ready function will
load as soon as the DOM is loaded, and before the page content is loaded. This will ensure that the script will run, cause all the necessary element are loaded
at this time.
scrollTop(), how far has the visitor scrolled down?
Now, everytime the visitors scrolls we execute a function. Because we want to see if the user reached a certain part of the webpage we make use of
(window).scrollTop(). This will returns how many pixels are hidden from view above the scrollable area. Since we use this on the window element it will return how many
pixels are hidden from view above the window. Let’s save this into a variable.
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
});
});
When to show the box
Now we can make a choice where we want to show the box.. Let’s say you want it to show up when the visitor reached a certain element on your page, e.g. the comments.
Most WordPress theme’s have a heading at the comments with the #comments id. Let’s use that to check if the visitor reached that part of your webpage.
To check how many pixels the heading element is removed from the top of the document we can use the offset function that comes with jQuery. This will return two values,
the distance from the top and from the left.
var c = $q('#comments').offset();
We could just check if our y variable is bigger then c everytime the user scrolls, but this will only return true
if the user scrolled past the #comments element with the top of their window. So let’s distract their window height from our c variable when checking for it.
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
var c = $('#comments').offset();
if(y>(c.top-$(window).height())) {
// this kicks in when the visitor reached our point, time to show the box!
} else {
// uh oh, not there yet, hide/re-hide the box!
}
});
});
So far, so good. We can now add the function to show or hide the box. Do we have a box yet? If not, add a div element somewhere with id=”the_box” in your footer and style it a little with CSS.
The minimum required for this to work properly css is ‘display:none;’ cause we don’t want it to be visible before the visitor scrolled down far enough. Give it a height and width too, it’s needed
for the jQuery animation we’re going to use.
Showing/hiding the box with some nice animation.
Of course we don’t want the box to just “be there” all of a sudden, it has to kick in with some nice animation so your visitor will notice it. jQuery comes with some nice
animation, and of course you can pick your own. In this example I used the fadeIn() function that comes with jQuery, but you could also consider show(), or a slide anim.
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
var c = $('#comments').offset();
if(y>(c.top-$(window).height())) {
$('#the_box').fadeIn("slow");
} else {
$('#the_box').fadeOut('slow');
}
});
});
That’s it, you just made your own scroll triggered box!
Actually, that’s all. If you did everything right you just finished your own scroll triggered box. Time to play around with it a little and tweak it to your likings!
Uh btw, by now you’ve probably noticed my own scroll triggered box in the bottom right, right? That’s a tweaked result of this basic piece of jQuery code! Ain’t it sweet?