Mashable, best known as social media resources website, created an awesome floating effect while user scrolling the page. Here’s a simple idea to clone this floating effect with jQuery.

Idea…

  1. Create a floating box.
  2. Initial the floating box location, put it beside the body content.
  3. While user scrolling the page, keep checking the scroll bar position.
  4. If the scroll bar y position is greater than the floating box y position, change the floating box y position dynamically.
  5. While the scroll bar y position lesser than the floating box y position, restore the original position.
  6. Use jQuery, of course.

1. HTML Layout

A simple HTML layout, header, content and footer, put a div “floating-box” above the content.

<div id="page">
  	<div id="header"><h1>header</h1></div>
	<div id="floating-box"></div>
	<div id="body">
		<h1>content</h1>
		<h2>Mashable floating effect example</h2>
	</div>
	<div id="footer"><h1>footer</h1></div>
</div>

2. Floating box 90×200

This is the box that will float smoothly while people scrolling the box. You may need to adjust the “margin-left:-100px;” a bit to suit your need.

#floating-box{
	width:90px;
	height:200px;
	border:1px solid red;
	background-color:#BBBBBB;
	float:left;
	margin-left:-100px;
	margin-right:10px;
	position:absolute;
	z-index:1;
}

3. No conflicts, please

Make sure jQuery has no conflict with other library. Highly recommend to check it.

    //avoid conflict with other script
    $j=jQuery.noConflict();
 
    $j(document).ready(function($) {

4. Position, position, position

Bind the jQuery scroll() event to keep checking the browser’s scroll bar position.

$(window).scroll(function () { 
 
	var scrollY = $(window).scrollTop();
	var isfixed = $floatingbox.css('position') == 'fixed';
 
	if($floatingbox.length > 0){
 
		if ( scrollY > bodyY && !isfixed ) {
			$floatingbox.stop().css({
				position: 'fixed',
				left: '50%',
				top: 20,
				marginLeft: -500
			});
		} else if ( scrollY < bodyY && isfixed ) {
			$floatingbox.css({
				position: 'relative',
				left: 0,
				top: 0,
				marginLeft: originalX
			});
		}		
	}	
});

If the scroll bar y position is greater than the floating box y position, change the floating box y position to “marginLeft: -500“. You may need to customize this value to suit your need.

	if ( scrollY > bodyY && !isfixed ) {
	   $floatingbox.stop().css({
		position: 'fixed',
		left: '50%',
		top: 20,
		marginLeft: -500
	   });
	 }

If the scroll bar y position lesser than the floating box y position, restore to the original position.

        if ( scrollY < bodyY && isfixed ) {
	   $floatingbox.css({
		position: 'relative',
		left: 0,
		top: 0,
		marginLeft: originalX
	   });
	}

5. Done

Try playing the below example to get an idea of the works.

P.S This floating effect feature is implemented in my DiggDigg WordPress plugin.

Try it yourself

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 
<style type="text/css">
	#floating-box{
		width:90px;
		height:200px;
		border:1px solid red;
		background-color:#BBBBBB;
		float:left;
		margin-left:-100px;
		margin-right:10px;
		position:absolute;
		z-index:1;
	}
	#page{
		width:800px;
    	margin:0 auto;
	}
	#header{
		border:1px solid blue;
		height:100px;
		margin:8px;
	}
	#body{
		border:1px solid blue;
		height:2400px;
		margin:8px;
	}
	#footer{
		border:1px solid blue;
		height:100px;
		margin:8px;
	}
	h1,h2{
		padding:16px;
	}
</style>
 
</head>
<body>
 
  <div id="page">
  	<div id="header"><h1>header</h1></div>
 
	<div id="floating-box">
 
	</div>
 
	<div id="body">
		<h1>content</h1>
		<h2>Mashable floating effect example</h2>
	</div>
	<div id="footer"><h1>footer</h1></div>
  </div>
 
 
<script type="text/javascript">
 
    //avoid conflict with other script
    $j=jQuery.noConflict();
 
    $j(document).ready(function($) {
 
	//this is the floating content
	var $floatingbox = $('#floating-box');
 
	if($('#body').length > 0){
 
	  var bodyY = parseInt($('#body').offset().top) - 20;
	  var originalX = $floatingbox.css('margin-left');
 
	  $(window).scroll(function () { 
 
	   var scrollY = $(window).scrollTop();
	   var isfixed = $floatingbox.css('position') == 'fixed';
 
	   if($floatingbox.length > 0){
 
	      $floatingbox.html("srollY : " + scrollY + ", bodyY : " 
                                    + bodyY + ", isfixed : " + isfixed);
 
	      if ( scrollY > bodyY && !isfixed ) {
			$floatingbox.stop().css({
			  position: 'fixed',
			  left: '50%',
			  top: 20,
			  marginLeft: -500
			});
		} else if ( scrollY < bodyY && isfixed ) {
		 	  $floatingbox.css({
			  position: 'relative',
			  left: 0,
			  top: 0,
			  marginLeft: originalX
		});
	     }		
	   }
       });
     }
  });
</script>
</body>
</html>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials