Derek Decker


  1. I am an avid web developer living in Oceanside, California. I work for
  2. I am extremely interested in building my front-end web development HTML5, CSS3, and JavaScript skills.
  3. I also have a strong background in PHP and web service architecture.
  4. I'm passionate about the web, beer, and surfing.




I'm in the process of redesigning, sorry about the mess. In the mean time, take a gander at my current hobby project.

topStick is meant to be a light-weight jQuery plugin to get that header-sticking effect you may have seen in web apps (they are used a lot on cell phones). I just wanted to see how well I could create the effect, and use it to practice my jQuery plugin writing skills. I don't particularly have a use for it, and if I did, I probably would have just looked elsewhere for a previously developed version :). Take a look and feel free to use it if you can't find anything better.

What happens is the items that are being "stuck" are created at page load as a clone of the original element, with a class of "active" applied to them. They only become visible if the top of the browser window is below the top of their container, and the element has not hit the bottom of it's container. At this point the original elements have their visibility property toggled to hidden, until they should be visible again (the user scrolls back up).

Tested in FF, Safari, Chrome, and IE7+.


Use the following code to initialize it on a jQuery object collection (of course this should be wrapped in $(document).ready()):


This assumes you have your HTML semantics written as such:

						<div class="stop-container">
							<h1>Stick me to the top</h1>
							<p>Some content to fill the container.</p>

There is also a certain necessesity to provide the following css (minimally):

					.menu-top-stop h1{ 		
						width:780px; /** width must be defined, if not you will see an interesting effect (maybe you prefer it?) **/
					 * The active version of the stuck menu needs to 
					 * be fixed to the top of the browser window, so 
					 * this is essential.
Development (3.17k)
Production (1.06k)