html - CSS Fixing has unusual effect on browser window -

i have sidebar affixes in way similar http://thenextweb.com/

here live demo of bug: http://adamkochanowicz.com/static/build0502/kickstrap/_examples/contacts.html

to recreate issue, scroll down page.

and somehow managed grab screenshot of issue: https://s3.amazonaws.com/prod_object_assets/assets/4995413178034/grab_2013-04-12_a_3.00.59_pm.png?awsaccesskeyid=akiajaticw4u3o4hfiea&expires=1367506772&signature=dkqfg5dzsmhczdo2benbxpd2zf0%3d

the grey area @ bottom "no-man's-land" you'd see when scroll far down on page.

i'm using jquery waypoints detect when apply stuck class sidebar.

once .stuck applied, gives #sidebar following css:

section#sidebar.stuck {   width: 300px;   position: fixed;   top: 0;   bottom: 0;   border-color: #ddd;   width: 25%;   -webkit-box-shadow: 2px 2px 5px #eeeeee;   box-shadow: 2px 2px 5px #eeeeee; } 

the jquery pretty simple:

<script>$('section#sidebar').waypoint('sticky');</script> 

for reason, bug not occur when horizontal viewport reduced. example, when open bottom-docked element inspector in chrome.

in contacts.html on line 866, css line class '.row' looks follows:

.row {   margin-left: -15px;   margin-right: -15px; } 

your bug fixed once removed or set to:

.row {   margin-left: 0px;   margin-right: 0px; }