Skip to content

Instantly share code, notes, and snippets.

@ricardosiri68

ricardosiri68/element-onview.js

Created May 31, 2015 21:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ricardosiri68/4b474734ef7b933b06e1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ricardosiri68/4b474734ef7b933b06e1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
element-onview.js
/*jslint nomen: true, debug: true, evil: true, vars: true, browser: true,
devel: true */
/*global _, $ */
var ElementOnView = function(options){
this.options = options;
this.items = $(options.item_selector);
this.window = $(window);
this.mostly_on_middle = options.mostly_on_middle;
this.mostly_over_middle = options.mostly_over_middle;
this.mostly_down_middle = options.mostly_down_middle;
window.addEventListener('scroll', _.bind(this.scrollMoves, this), false);
};
ElementOnView.prototype = {
scrollMoves: function(e){
/* filtra todos los items que se encuentran dentro de la vista */
var on_view = _.filter(this.items, _.bind(this.isOnView, this));
if (on_view.length == 1) {
/* si solo un item se encuentra en la pantalla */
this.mostly_on_middle(on_view[0]);
} else if (on_view) {
/* si mas de uno se encuentra en la pantalla */
var on_middle = _.min(
on_view,
_.bind(this.on_middle, this)
);
this.mostly_on_middle(on_middle);
/* los elementos que se encuentran mas alejado del medio */
off_middle = _.filter(
on_view,
function(elem){ return elem !== on_middle; }
);
if (this.isOverMiddle(off_middle[0])) {
/* si se encuentra lejos del medio y por encima de él */
this.mostly_over_middle(off_middle[0]);
} else {
/* en caso contrario se encuentra debajo y el scroll esta
* subiendo
*/
this.mostly_down_middle(off_middle[0]);
}
}
},
isOnView: function(elem){
/* todos los elementos que se encuentran dentro de la vista: lo que se
* ve en la pantalla y lo que ya fue escroleado hacia la parte
* superior
*/
var elem = $(elem);
/* tope y fondo scrolleado */
var viewTop = this.window.scrollTop();
var viewBottom = viewTop + this.window.height();
/* tope y fondo absoluto */
var elemTop = elem.offset().top;
var elemBottom = elemTop + elem.height();
/* se encuentra o no en el rango visible de la pantalla */
return (elemTop >= viewTop && elemTop <= viewBottom) ||
(elemBottom >= viewTop && elemBottom <= viewBottom) ||
(elemTop <= viewTop && elemBottom >= viewBottom);
},
isOverMiddle: function(elem){
var elem = $(elem);
var middle = this.get_middle_view();
return middle > (elem.offset().top + elem.height());
},
get_middle_view: function(){
return this.window.scrollTop() + (this.window.height()/2);
},
on_middle: function(elem){
var middle = this.get_middle_view();
var elem = $(elem);
return _.min([
Math.abs(middle - elem.offset().top),
Math.abs(middle - (elem.offset().top + elem.height()))
]);
}
};
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Posts</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.map"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script language="javascript" type="text/javascript" src="element-onview.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>
<body>
<div class="container">
<div class="post">
<div class="post-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum facilisis leo, vitae tincidunt elit. Nam ac nisi mauris. Etiam pulvinar ullamcorper nisi. Pellentesque a tortor id turpis congue aliquam. Praesent aliquam ut dui in viverra. Aenean euismod efficitur dictum. Sed nisl nisi, vulputate at posuere ut, rhoncus et tellus. Ut accumsan blandit tristique. Quisque dapibus condimentum nunc, tristique aliquam odio vehicula et. Sed porta rutrum nulla, et tristique velit egestas ut. Cras dignissim nunc eget lacus pharetra, eu rutrum purus tempus. In hac habitasse platea dictumst. Fusce cursus lectus a tortor volutpat auctor. Nullam vestibulum dolor at massa rutrum, nec ultricies eros bibendum. Morbi diam mi, volutpat non sapien eu, semper cursus ex. In hac habitasse platea dictumst.
Nunc pellentesque congue laoreet. Nulla turpis elit, pretium in sapien eu, lobortis molestie purus. Pellentesque non arcu ut quam mattis vehicula nec vitae urna. Morbi commodo scelerisque sodales. Nulla augue metus, gravida vel arcu sed, tincidunt scelerisque arcu. Donec velit felis, scelerisque sit amet mi quis, consectetur bibendum lorem. Nulla elementum at diam vulputate pretium. Nulla facilisi. Donec sapien eros, sagittis at iaculis at, efficitur a risus. Fusce vulputate, mauris vitae eleifend tempor, est felis efficitur est, in sollicitudin tellus sapien malesuada purus. Integer aliquet libero nisi, eget ultricies felis maximus ut. Donec iaculis viverra diam sit amet laoreet. In hac habitasse platea dictumst. Curabitur sagittis turpis purus, vitae lobortis nulla ultricies eu. Integer ultricies convallis nibh, vel tincidunt sapien aliquam eu.
Duis aliquam lacus quis fermentum finibus. In sit amet quam tellus. Duis in erat rhoncus, vehicula enim sit amet, convallis quam. Donec quam justo, ullamcorper vitae gravida ac, pulvinar a ante. Nullam eget feugiat ante. Donec ut justo et nunc luctus commodo. Fusce in iaculis ex, eget pulvinar velit.
Curabitur aliquam ipsum sit amet massa aliquet porta. Etiam nisl sem, interdum nec lorem eget, iaculis lobortis nulla. Aliquam id augue enim. Mauris mollis, leo in euismod molestie, ligula augue aliquam ipsum, id viverra massa ex et erat. Ut pharetra ipsum nunc, vel aliquam nunc tristique eget. Donec ultrices molestie diam eu sollicitudin. In ultricies ornare tempor. Quisque aliquam, tellus in malesuada tristique, augue enim finibus lectus, a elementum justo sem ut lorem. Donec ac mi et libero tempus rhoncus. Donec euismod cursus sapien ac facilisis. Aenean a vulputate leo. Praesent mollis est sed lacus dictum, nec posuere nunc consectetur.
Nullam eu sem at lorem euismod euismod. Nunc massa quam, viverra sed urna et, convallis pellentesque lorem. Fusce elit nisl, ultrices ut posuere quis, cursus sed metus. Donec quis ullamcorper ex. Morbi semper risus neque, porttitor tristique nibh laoreet quis. Sed ac eleifend felis. Praesent sed dictum metus.
Nulla eu ligula ac erat suscipit porttitor. Nullam pellentesque dolor eu ex pellentesque feugiat. Nulla pulvinar, metus ac eleifend efficitur, tortor libero aliquam ex, nec mollis neque neque rutrum leo. Cras ac eros in neque dictum finibus et sed est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tristique, tortor ac semper elementum, justo leo bibendum tortor, eget ultricies quam magna vitae mauris. Mauris blandit velit in tellus malesuada, eu convallis massa dapibus. Curabitur at sollicitudin est.
Nam pellentesque augue ut fermentum volutpat. Ut vitae sollicitudin neque, ut facilisis nisl. Aliquam elementum ultricies sapien a pulvinar. Nulla ut dictum arcu, at sagittis massa. Aliquam sit amet blandit libero, quis feugiat felis. Vivamus quis mauris ultrices, feugiat ex a, varius orci. Curabitur iaculis odio non ornare scelerisque. Nam egestas iaculis enim, vel interdum neque consequat ultricies.
</div>
<div class="user-data">
<div class="user-data-container" data="rodriz">
<span class="user-avatar" style="background-image: url(http://a09.t26.net/taringa/avatares/9/4/0/5/6/D/RodriZ/120x120_46E.jpg)" ></span>
</div>
</div>
</div>
<div class="post">
<div class="column post-content">
Donec eu scelerisque libero, et tempus elit. Praesent semper vitae nunc vitae tincidunt. Suspendisse ut erat risus. Aliquam at dictum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas efficitur posuere leo nec venenatis. Etiam porta magna vel urna pellentesque condimentum. Quisque vel enim eget sem finibus consequat a quis tellus. Aliquam erat volutpat.
Morbi nec turpis nunc. Mauris ac efficitur lacus. Aliquam rhoncus, mi vel faucibus cursus, neque ex rhoncus lacus, vel aliquet nunc augue eu dolor. Maecenas sodales urna vitae velit gravida molestie. Sed non aliquet diam, eget tempor mi. Etiam non maximus dolor, quis tincidunt lacus. Pellentesque sit amet augue quis enim molestie feugiat egestas id eros. Cras ac massa sagittis sem tristique finibus sed ut ex. Integer bibendum tortor eu ornare elementum. Nunc ac sodales enim, in blandit odio. Donec fringilla augue nec risus porttitor tincidunt. Integer et sem enim. Sed fringilla varius neque, sit amet cursus magna tristique et. Ut sapien metus, tincidunt in viverra non, molestie nec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Cras laoreet id erat ac convallis. Phasellus velit tortor, accumsan venenatis rutrum at, aliquet nec ex. In placerat euismod diam, sit amet tincidunt mauris tempor a. Phasellus at sapien ex. Nunc id neque fermentum, tincidunt enim ac, ultrices lectus. In iaculis ultricies ipsum sed porttitor. Ut vitae tincidunt quam. In viverra ante a consequat suscipit. Vestibulum sed arcu vel erat congue congue. Pellentesque turpis neque, tempus accumsan augue ac, iaculis faucibus nisi. Proin sit amet dictum eros. Proin hendrerit lectus lacinia augue aliquam tempor. Aenean in mauris felis. Suspendisse sit amet nisl vel ante pretium iaculis tincidunt non mi. Maecenas ac porta urna. Etiam tincidunt varius neque ut convallis.
Fusce tristique dolor tempor, molestie massa vel, dapibus nisl. Aenean ac egestas libero, elementum lobortis nunc. Nunc facilisis magna nec urna eleifend, nec vehicula tellus elementum. Nunc consequat tellus at urna dapibus dapibus. Morbi malesuada viverra dapibus. Sed at mi rhoncus, viverra lorem ac, tempor nulla. In lobortis metus lacus, et porttitor nunc imperdiet mollis. Aenean malesuada augue eu augue volutpat sollicitudin. Quisque ornare enim libero. Cras eget sollicitudin enim. Nunc ut tincidunt dolor, vel auctor est. Vivamus malesuada, mauris in pellentesque molestie, tortor quam imperdiet purus, vel feugiat urna metus in mi. Nam turpis augue, mollis non tempor eget, eleifend at ex. Mauris arcu diam, auctor vitae nulla non, lobortis aliquam leo. Sed at leo ut enim malesuada efficitur.
Vestibulum ultrices est ac laoreet fermentum. Duis at dolor ac nisl dignissim rutrum. Cras quis lacus id mi sollicitudin bibendum. Ut quis tortor vitae nibh fringilla porttitor condimentum ac est. Nam faucibus neque ac dolor gravida, sed semper mi ornare. Praesent euismod fermentum iaculis. Donec pellentesque nulla vitae dui pellentesque hendrerit. Vestibulum imperdiet ut felis ac imperdiet. Nulla pellentesque lacus sed gravida sagittis. Sed tristique pretium feugiat.
Nulla facilisi. Aenean ut lacus tempus, sagittis mauris vitae, elementum dolor. Maecenas bibendum et nulla ornare auctor. Proin et nisi id nisl pharetra euismod sit amet ut sem. In lacinia sapien felis, et consectetur augue malesuada sed. Sed a diam nec nisl vulputate finibus. Nulla facilisi. Etiam non faucibus ex, ut posuere ipsum. Cras consectetur nisl porttitor, tempus erat quis, semper magna. Sed a imperdiet ante, eget imperdiet arcu. In egestas nisi pellentesque lacus tincidunt finibus. Nam tristique metus eget arcu volutpat, id rhoncus neque tristique. Phasellus placerat tempus eleifend. Duis et dapibus ante.
Nunc efficitur lacus dignissim ligula dictum sodales. Nullam bibendum enim metus. Curabitur at dolor hendrerit, auctor lectus a, condimentum enim. Aenean euismod tincidunt massa. Proin eu ex at nisi gravida vulputate. Maecenas dapibus pellentesque turpis ut malesuada. Nullam accumsan nisl nec augue molestie, auctor auctor mi accumsan. In consectetur, arcu non tempor molestie, sem velit convallis neque, quis viverra augue nisl ut nisi. Sed auctor est ac neque pharetra ornare. Suspendisse sit amet aliquet ex, quis sodales massa. Morbi euismod finibus enim non varius. Nulla ipsum quam, volutpat et faucibus volutpat, vulputate quis nisl. Donec sit amet sapien scelerisque, tempus elit vel, blandit eros. Aliquam erat volutpat. Ut semper, magna et consectetur maximus, enim neque fringilla odio, sed auctor nulla felis ac augue. Praesent accumsan urna risus, ut ullamcorper enim porttitor fringilla.
In ullamcorper diam sed posuere tempor. Suspendisse interdum massa in felis elementum sodales. Mauris fermentum, felis sed imperdiet iaculis, risus nibh consequat dolor, a rhoncus enim risus in ante. Donec ex tortor, ultrices a convallis ut, imperdiet eget lorem. Sed eu nunc at libero congue aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus felis lectus, ultrices sit amet mollis in, egestas vitae ligula. In hac habitasse platea dictumst. Mauris eu ex arcu. Ut vel velit ullamcorper, venenatis mi ut, lobortis tellus. Etiam faucibus nibh quis dui imperdiet pellentesque. Cras tincidunt, tortor ut congue feugiat, felis arcu finibus nisi, non ultrices nisl neque sodales sem. Pellentesque scelerisque tellus purus, pretium interdum lacus elementum a. In nec venenatis elit, et congue turpis. Aenean eget sem pretium, dictum tellus nec, maximus dolor.
</div>
<div class="column user-data">
<div class="user-data-container" data="richar">
<span class="user-avatar" style="background-image: url(http://a09.t26.net/taringa/avatares/5/E/F/7/0/C/mucha_cafeina/120x120_41B.jpg)"></span>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
/*jslint nomen: true, debug: true, evil: true, vars: true, browser: true,
devel: true */
/*global ElementOnView */
(function(){
var main = function(){
var avatar_fixed = new ElementOnView({
item_selector: '.user-data-container',
mostly_on_middle: function(elem){
var avatar;
var avatar_matchs = elem.getElementsByClassName('user-avatar');
if (avatar_matchs) {
avatar = avatar_matchs[0];
avatar.classList.remove('avatar-bottom');
avatar.classList.add('avatar-fixed');
}
},
mostly_over_middle: function(elem){
var avatar;
var avatar_matchs = elem.getElementsByClassName('user-avatar');
if (avatar_matchs) {
avatar = avatar_matchs[0];
avatar.classList.remove('avatar-fixed');
avatar.classList.add('avatar-bottom');
}
},
mostly_down_middle: function(elem){
var avatar;
var avatar_matchs = elem.getElementsByClassName('user-avatar');
if (avatar_matchs) {
avatar = avatar_matchs[0];
avatar.classList.remove('avatar-fixed');
avatar.classList.remove('avatar-bottom');
}
}
});
};
window.addEventListener('load', main, false);
}());
Raw
style.css
body{
margin: 0;
font-family: sans-serif;
font-size: 16px;
}
.container{
width: 960px;
margin: 0 auto;
overflow-y: hide;
}
.post{
position: relative;
overflow-y: auto;
margin-top: 100px;
padding-top: 10px;
border-top: solid 1px #444;;
}
.column{
float: left;
}
.post-content{
width: 650px;
margin-right: 20px;
}
.user-data{
position: absolute;
right: 0;
top: 0;
width: 290px;
height: 100%;
background-color: #eee;
}
.user-data-container{
height: 100%;
width: 100%;
position: relative;
}
.user-avatar{
display: block;
width: 120px;
height: 120px;
background-repeat: no-repat;
background-size: cover;
}
.avatar-fixed{
position: fixed;
top: 200px;
}
.avatar-bottom{
position: absolute;
bottom: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment