Sticky Avatars Dashboard

index.jade

- var images = [ 'https://static.pexels.com/photos/5938/food-salad-healthy-lunch-medium.jpg', 'https://static.pexels.com/photos/5927/food-salad-red-lunch-large.jpg', 'https://static.pexels.com/photos/6118/food-water-corn-cooking-medium.jpg', 'https://static.pexels.com/photos/5876/food-salad-healthy-vegetables-medium.jpg',  'https://static.pexels.com/photos/5928/salad-healthy-diet-spinach-medium.jpg'];
.container
  ul.posts
    each img in images
      li.post
          .post-content
            header: a(href="https://twitter.com/@kamciesla") @kamciesla posted this
            img(src=img)
            footer 
              a(href="https://kamilciesla.pl")
                i.fa.fa-globe
              a(href="https://pl.linkedin.com/in/kamilciesla")
                i.fa.fa-linkedin
              a(href="https://twitter.com/@kamciesla")
                i.fa.fa-twitter
              a(href="https://www.behance.net/kamciesla")
                i.fa.fa-behance
              a(href="https://dribbble.com/kamilciesla")
                i.fa.fa-dribbble
          a.post-avatar(href="http://kamilciesla.pl")
  p.no-posts Sorry... there are no more posts to show right now.
        
        
  
    

script.js

$('.post-avatar').each(function() {
  var avatar = $(this),
    avatarWatcher = scrollMonitor.create(avatar.parent(), {
      top: 20,
      bottom: -avatar.height() - 20
    });

  avatarWatcher.stateChange(function() {
    if (avatarWatcher.isInViewport) {
      if (avatarWatcher.isInViewport && avatarWatcher.isAboveViewport) {
        avatar.removeClass('post-avatar--absolute').addClass('post-avatar--fixed');
      } else if (!avatarWatcher.isAboveViewport) {
        avatar.removeClass('post-avatar--absolute').removeClass('post-avatar--fixed');
      }
    } else {
      avatar.removeClass('post-avatar--fixed').addClass('post-avatar--absolute');
    }
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmonitor/1.0.12/scrollMonitor.min.js"></script>

sticky-avatars-dashboard.markdown

Sticky Avatars Dashboard

Avatar fixed positioning and locking inspired by Tumblr's dashboard using scrollMonitor.

A Pen by kamce on CodePen.

License.

style.scss

$max-width: 650px;
$avatar-width: 80px;

$grey-d: #666;
$grey-l: #a2a2a2;
$white: #fff; 

body {
  background: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/restaurant.png');
  font: bold 13px Helvetica, Arial, sans-serif;
}

a {
  color: $grey-l;
  text-decoration: none;
  transition: color .3s ease;
  
  footer & { margin-right: 10px; }
  
  &:hover { color: $grey-d; }

}

.container {
  max-width: $max-width;
  width: 100%;
  margin: 0 auto;
}

.no-posts {
  padding: 50px 10px 30px $avatar-width + 20;
  text-align: center;
  color: $white;
}

.posts {
  list-style: none;
  margin: 20px auto;
  padding: 0;
  width: 100%;

  .post {
    margin-top: 20px;
    margin-left: $avatar-width+20;
    position: relative;
  }
  
  .post-avatar {
    background: $white url('http://on.be.net/1Noq5Sf') center/100%;
    height: $avatar-width;
    width: $avatar-width;
    border-radius: 4px;
    position: absolute;
    left: -$avatar-width - 20px;
    top: 0;
  
    
    &.post-avatar--fixed {
      position: fixed;
      left: 50%;
      top: 20px;
      margin-left: -$max-width/2;
    }
    
    &.post-avatar--absolute {
      position: absolute;
      bottom: 0;
      left: 0;
      margin-left: -$avatar-width - 20;
      top: auto;
    }
  }

  .post-content {
    background: $white;
    border-radius: 4px;
    width: 100%;
    
    img {
      width: 100%;
    }
    
    header, footer {
      padding: 15px 20px;
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />