Sample JavaScript code

<script type="text/javascript">
   var mov = new wrapScroll('movable','wrap','static');
   mov.marginTop = 10;
   mov.marginBottom = 50;
</script>

Sample CSS Layout code

/* -- layout -- */
#wrap {
   width:100%;
   float:left;
}
#content {
   margin-right:260px;
}
#sidebar {
   float:left;
   margin-left:-250px;
   width:230px;
}
#static {
   width:210px;
}
#movable {
   width:210px;
}

Sample CSS Design code

/* -- design -- */
#content .column {
   background-color:#fff;
   border:8px solid #eee;
   padding:8px;
   margin-bottom:10px;
   height:2000px;
}
#static {
   background-color:#fff;
   border:8px solid #eee;
   padding:8px;
   height:160px;
}
#movable {
   background-color:#f1f5fa;
   border:8px solid #c9d8ed;
   padding:8px;
   height:120px;
}
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="static">#static</div>
   <div id="movable">#movable</div>
   </div>
</div>
<!-- end of container -->
</body>
© youmos.com