Sticky bar

by lbartolic

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container">
  <div class="sticky-bar">
    <div class="child">
      <img src="http://integrityhr.com/wp-content/uploads/2015/11/IHR_search_icon-200x200.png">
      <div class="child-content">
        <h3>
          Other Publications
        </h3>
      </div>
    </div>
    <div class="child">
      <img src="http://theohbrothers.com/index/footer_youtube_icon_256x256_w.png">
      <div class="child-content">
        <h3>
          Something
        </h3>
      </div>
    </div>
    <div class="child">
      <img src="http://integrityhr.com/wp-content/uploads/2015/11/IHR_search_icon-200x200.png">
      <div class="child-content">
        <h3>
          Third Item
        </h3>
      </div>
    </div>
  </div>
</div>

SCSS

/* VARS */

$item-size: 50px;
$item-divider-size: 2px;
$item-background: #333;
$item-img-padding: 3px;

/* -- */

* {
  box-sizing: border-box;
}

body {
  background: #fff;
}

.container {
  width: 90%;
  height: 1000px;
  position: relative;
  background: #f3f3f3;
  overflow: hidden;
}


.sticky-bar {
  position: absolute;
  right: 0;
  top: 60px;
  height: auto;
  overflow: visible;
  transition: 0.15s ease-out;
  .child {
    width: $item-size;
    height: $item-size;
    position: relative;
    transition: 0.12s ease-out;
    margin-bottom: $item-divider-size;
    overflow-x: visible;
    .child-content {
      display: flex;
      align-items: center;
      height: 100%;
      background: $item-background;
      white-space: nowrap;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      transition: 0.15s ease-out;
      h3 {
        color: #fff;
        margin: 0;
        padding: 0 10px;
        font-style: italic;
      }
    }
    img {
      padding: $item-img-padding;
      background: $item-background;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
    }
    &:hover {
      .child-content {
        transform: translateX(calc(-100% + 1px));
      }
    }
  }
}

JavaScript

$(window).scroll(function(e) {
  $('.sticky-bar').css({
    'top': 60 + $(window).scrollTop()
  });
});