Make a Sticky div (Follows visitor) /

The HTML

The obvious bit of HTML that you’ll need is the content of the “sticky” div. The not-so-obvious bit of HTML that you’ll need is a secondary div that “catches” the sticky div so that it stops sticking to the window, once it’s back in its original spot.

1
2
3
4
5
6
7
<div id="catcher">
    <!--catcher-->
</div>
 
<div id="sticky">
    <!--sticky-->
</div>

If you’re using WordPress, don’t worry about adding this markup, it’s even easier than that. Add two text widgets to the bottom of your sidebar. Inside these widgets, add <!--catcher--> and <!--sticky-->. Make sure you save the widgets. We’ll come back to them in a minute.

The jQuery

First off, we’ll revisit our isScrolledTo function, which I love reusing since it’s so simple and elegant. We’re going to modify it slightly from the last tutorial since we’re focusing on the top edge of our screen this time, not the bottom.

1
2
3
4
5
6
7
8
9
function isScrolledTo(elem) {
    var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
    var docViewBottom = docViewTop + $(window).height();
 
    var elemTop = $(elem).offset().top; //num of pixels above the elem
    var elemBottom = elemTop + $(elem).height();
 
    return ((elemTop <= docViewTop));
}

Next, we want to define our “catcher” div and our “sticky” div. The catcher div should be immediately above the sticky div in our sidebar, and the sticky div should be at the bottom of our sidebar so that it doesn’t cover up other content as the visitors scroll.

If you’re using WordPress, then these IDs are already set for you and you need to find them. Go into the source code of your website (‘right click’ > ‘view source’) and search for “catcher” and “sticky” (the text we inserted earlier). You’ll see them nested inside something that looks like <li id="text-xx" class="widget widget_text">. The text-xx are the IDs that you want to use for these.

If you’re not using WordPress, then the IDs are whatever you specified when you added the divs earlier.

1
2
var catcher = $('#catcher');
var sticky = $('#sticky');

Now that we have defined everything, it’s time to setup our actions. We’re going to put everything inside jQuery’s $(window).scroll() function, so that our script always runs whenever the visitor is scrolling.

The first if statement checks to see if our sticky div is bumping up against the top of the screen. If it is, it’s time to break it off from the rest of the sidebar and stick it to the window with some fixed positioning.

The second if statement checks to make sure that the sticky div is never higher than the catcher div. If it is, it’s time to put the sticky div back in its place at the end of the sidebar.

Geek note: We can’t really add it back into the flow of the page without a full page reload. So we’re going to fake it by applying absolute positioning. But don’t worry. I promise, your visitors won’t notice…

1
2
3
4
5
6
7
8
9
10
11
$(window).scroll(function() {
    if(isScrolledTo(sticky)) {
        sticky.css('position','fixed');
        sticky.css('top','0px');
    }
    var stopHeight = catcher.offset().top + catcher.height();
    if ( stopHeight > sticky.offset().top) {
        sticky.css('position','absolute');
        sticky.css('top',stopHeight);
    }
});

We’re going to wrap all of that jQuery inside some script tags <script type="text/javascript"> and </script>. Don’t forget to load the jQuery library, otherwise none of this will work!

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

When the jQuery is all put together it will look like something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
 
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
 
            return ((elemTop <= docViewTop));
        }
 
        var catcher = $('#catcher');
        var sticky = $('#sticky');
 
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css('position','fixed');
                sticky.css('top','0px');
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight > sticky.offset().top) {
                sticky.css('position','absolute');
                sticky.css('top',stopHeight);
            }
        });
    });
</script>

You should put this somewhere in your site’s footer, before the closing </body> tag. If you’re using WordPress, no need to worry about any additional HTML markup. Just add some content to the two text widgets from your admin dashboard.

If you’re building your sidebar manually, make sure you add the HTML markup that matches the catcher and sticky divs we specified earlier.

You can also work with div class instead of ID. This way in Joomla you simply give 2 modules a module class suffix. The top one in the sidebar " catcher" (note the space) the lowest one (sticky module) " sticky". In the jQuery code replace #catcher with .catcher. Same for #sticky.

Hebt u meer vragen? Een aanvraag indienen

Opmerkingen

Mogelijk gemaakt door Zendesk