Sample JavaScript code

<script type="text/javascript">
   new wrapScroll('movable1','wrap');
   var mov2 = new wrapScroll('movable2','wrap');
   mov2.marginTop = 350;
</script>

Sample CSS Layout code

/* -- layout -- */
#wrap {
   width:100%;
   float:left;
}
#content {
   margin-right:100px;
}
#sidebar {
   float:left;
   margin-left:-190px;
   width:90px;
}
#movable1 {
   width:150px;
}
#movable2 {
   width:150px;
}

Sample CSS Design code

/* -- design -- */
#content .column {
   background-color:#fff;
   border:8px solid #eee;
   padding:8px;
   margin-bottom:10px;
   height:2000px;
}
#movable1, #movable2 {
   background-color:#f1f5fa;
   border:8px solid #c9d8ed;
   padding:8px;
   height:150px;
   filter:alpha(opacity=50);
   opacity:0.5;
}
code {
   display:block;
   margin:8px 0px;
   padding:8px;
   font-size:small;
   color:#008000;
   line-height:130%;
   background:#fbfbfc;
   border:1px solid #eee;
}

Sample HTML body code

<body>
<div id="container">

   <div id="wrap">
   <div id="content">
   <div class="column">#content .column</div>
   </div>
   </div>

   <div id="sidebar">
   <div id="movable1">#movable1</div>
   <div id="movable2">#movable2</div>
   </div>
</div>
<!-- end of container -->
</body>
© youmos.com