Cacher is the code snippet organizer for pro developers

<div class='box-1'></div>
<div class='box-2'></div>
<div class='box-3'></div>
<div class='box-4'></div>

/*
 * Mixin to compensate for the height of the admin bar 
 * for fixed position elements in WordPress themes 
 */
.sticky-header {
  position: fixed;
  top: 0;
  offset-type: number;
}
.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

.sticky-header-offset {
  position: fixed;
  top: 10px;
  offset-type: number;
}
.admin-bar .sticky-header-offset {
  top: 66px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header-offset {
    top: 52px;
  }
}

.sticky-header-fake-offset {
  position: fixed;
  top: 10px;
  offset-type: string;
}
.admin-bar .sticky-header-fake-offset {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header-fake-offset {
    top: 32px;
  }
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

/*
 * Mixin to compensate for the height of the admin bar 
 * for fixed position elements in WordPress themes 
 */
 
@mixin admin-sticky-fix( $offset: 0 ) {
  $narrow-offset: 46px;
  $wide-offset: 32px;
  @if $offset != 0 and type-of($offset) == 'number' {
    $narrow-offset: $narrow-offset + $offset;
    $wide-offset: $wide-offset + $offset;
  }
  .admin-bar & {
    top: $narrow-offset;
    @media screen and (min-width: 783px) {
      top: $wide-offset;
    }
  }
  
  offset-type: type-of($offset);
}

.sticky-header {
  position: fixed;
  top: 0;

  @include admin-sticky-fix;
}
.sticky-header-offset {
  position: fixed;
  top: 10px;

  @include admin-sticky-fix(20px);
}

.sticky-header-fake-offset {
  position: fixed;
  top: 10px;

  @include admin-sticky-fix(dumb);
}

.box-1
.box-2
.box-3
.box-4