Limited Fixed Area

Have you seen or used Thoughtplifier theme? If you notice, there is this “limited fixed sidebar“. Basically it’s an element which is positioned using the position: relative absolute combo and its top CSS property is dynamically modified using jQuery so it can be set to be stopped when the window is scrolled to particular area.

To create this functionality, here are what you need:

  1. .scroll() : trigger an action when the window is scrolled
  2. .scrollTop() : get the margin-top of current scrolled window toward the top side of the document
  3. .offset() : get the margin-top or margin-left of particular element toward the document
  4. .height() : get the height of particular element

Combine those APIs to work on this logic. When the window is scrolled:

  1. If the window position is in between top limit and bottom limit (let’s say the you want this limited fixed area should only move beside article area and stopped when the window is scrolled to comment area), animate it in relative manner toward the position of the top window.
  2. If the window position has reached bottom limit, stop the fixed limit area above the bottom limit
  3. If the window isn’t in between top limit and bottom limit NOR reached bottom limit which means that it is scrolled to the top, re-positioned it to its original state.

Here’s the jQuery functionality created based the logic above:

If the window is scrolled:
$(window).scroll(function(){
// place the action here
});

The if conditional logic:

$(window).scroll(function(){
if ( ){
/* Check if the current window position is below the #article AND above the #content */
} else if (){
/* If the current window position is below the #comment, stop it on the top of #comment. */
} else {
/* If it isn't below the #content or in between #article and #comment,
it means that the window is scrolled to the top. Set the value to zero
to place the #box on its original position. */
}
});

And here’s the complete code:

$(document).ready(function() {
var starting_position = $('#box').offset();
var top_padding = 10;
var bottom_limit = $('#comment').offset();
var box_height = $('#box').height() + 20;

$(window).scroll(function(){
var top_window = $(window).scrollTop();

if (top_window > starting_position.top && top_window < bottom_limit.top - box_height){
$('#box').stop().animate({top: top_window - starting_position.top + top_padding}, 400);
} else if (top_window > bottom_limit.top - starting_position.top - box_height){
$('#box').stop().animate({top: bottom_limit.top - starting_position.top - box_height }, 400);
} else {
$('#box').stop().animate({top: 0 }, 400);
}
});
});

I’d recommend you to check out the demo page and view its source code to understand it more. I’ve added couple of comment lines to make it more understandable:

Limited Fixed Area Using jQuery Demo

5 thoughts on “Limited Fixed Area Using jQuery

  1. Assalamua’alaikum..
    Maaf ya mas komentarnya bahasa indonesia.
    Saya lihat postingan sebelumnya juga ada bahasa indonesianya.
    Saya request postingan donk.. Tolong postingin gimana caranya buat menu yang berjalan kayak punya mas ini, disebelah kanan ini? Pakek blogger ya mas..
    Mohon tanggapannya, segera.
    Terimakasih..
    Wassalamu’alaikum..

    1. This very posting discusses about the trick you’d like to know. Please read it carefully.

  2. bagaimana cara membuat tombol more less seperti yang ada di atas judul postingan anda ?

  3. wah udh jarang update nih…

  4. Great function, thanks a lot

Share Your Thought