Want to have a "block" element move up and down the page when the page scrolls?  Easy.  I'll show you how to get this up and running with jQuery Scroll Follow and Drupal 7.

Add the script to your site

Download the script and save it in a web accessible directory.  Usually the theme folder will work just fine.

Add it to your theme so it will be included on all pages where it will be needed.  This could be a page template such as page.tpl.php or you could simply add it to template.php to have it included in all pages.  If you copied it to your theme folder just add the following php code to your template file of choice:

drupal_add_js(path_to_theme().'/jquery.scrollfollow.js');

Be sure to clear your cache.  It would also be wise to verify the script is being served properly with Firebug or a similar browser tool.

Add the effect to the object

Now we need to add a little javascript to apply the effect to the object.  You could add this most anywhere, but I'd recommend maintaining a .js file with custom scripts such as this one.  Here is some example code which will add the effect to an object with the id of "mymovingdiv."

(function ($) {
   $(document).ready(function() {
   // Add scrollfollow to a certain div
   $('#mymovingdiv').scrollFollow();
   }); 	
})(jQuery);

Adjust CSS as needed

In order to work properly the object you're attempting to move must be positioned either relatively or absolutely.  You can define this in your stylesheet such as:

#mymovingdiv { position: relative; }

The moving object will also be constrained by it's parent object.  You may need to adjust the height of the object's parent in order to increase, or limit, the travel of your moving object.

More information

For more information, and documentation see http://kitchen.net-perspective.com/open-source/scroll-follow/

Tags
jQuery
Drupal