Avatar fixed positioning and locking inspired by Tumblr's dashboard using scrollMonitor.
Forked from kamce's Pen Sticky Avatars Dashboard.
A Pen by Mohammad Sami AlMouhtaseb on CodePen.
- 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="http://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="http://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. | |
$('.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'); | |
} | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://sakabako.github.io/scrollMonitor/scrollMonitor.js"></script> |
Avatar fixed positioning and locking inspired by Tumblr's dashboard using scrollMonitor.
Forked from kamce's Pen Sticky Avatars Dashboard.
A Pen by Mohammad Sami AlMouhtaseb on CodePen.
$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; | |
} | |
} | |
} | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> |