Skip to content

Instantly share code, notes, and snippets.

@puckbag
Created July 14, 2015 15:36
Show Gist options
  • Save puckbag/ae1a61ddc70ad9a2c479 to your computer and use it in GitHub Desktop.
Save puckbag/ae1a61ddc70ad9a2c479 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
#col-1 {
background-color: rgba(255, 0, 0, 0.5);
}
#col-2 {
background-color: rgba(0, 255, 0, 0.5);
}
#col-3 {
background-color: rgba(0, 0, 255, 0.5);
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">Needy Columns</h1>
<p>Keeps columns within view port, contained to parent parent, staying top or bottom based on scroll direction.</p>
<hr>
<div class="row needy-columns" data-cp-selector="> [class*='col-']">
<div class="col-xs-4" id="col-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Gloriosa ostentatio in constituendo summo bono. Duo Reges: constructio interrete. Deprehensus omnem poenam contemnet. Que Manilium, ab iisque M. Ut alios omittam, hunc appello, quem ille unum secutus est. Quamquam te quidem video minime esse deterritum. Avaritiamne minuis? </p>
<p>Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. Satis est ad hoc responsum. Quid igitur, inquit, eos responsuros putas? Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Sed quot homines, tot sententiae; Maximas vero virtutes iacere omnis necesse est voluptate dominante. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Si quicquam extra virtutem habeatur in bonis. Ut optime, secundum naturam affectum esse possit. Quod quidem nobis non saepe contingit. Traditur, inquit, ab Epicuro ratio neglegendi doloris. </p>
<p>Nam si propter voluptatem, quae est ista laus, quae possit e macello peti? Neque solum ea communia, verum etiam paria esse dixerunt. Expectoque quid ad id, quod quaerebam, respondeas. Esse enim, nisi eris, non potes. </p>
<p>Mihi enim satis est, ipsis non satis. Quod iam a me expectare noli. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; </p>
<p>Faceres tu quidem, Torquate, haec omnia; Hoc enim constituto in philosophia constituta sunt omnia. Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. Iubet igitur nos Pythius Apollo noscere nosmet ipsos. Bonum patria: miserum exilium. Videmus igitur ut conquiescere ne infantes quidem possint. </p>
</div>
<div class="col-xs-4" id="col-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. At quanta conantur! Mundum hunc omnem oppidum esse nostrum! Incendi igitur eos, qui audiunt, vides. Quae cum dixissem, Habeo, inquit Torquatus, ad quos ista referam, et, quamquam aliquid ipse poteram, tamen invenire malo paratiores. Utrum igitur tibi non placet, inquit, virtutisne tantam esse vim, ut ad beate vivendum se ipsa contenta sit? Duo Reges: constructio interrete. Sit hoc ultimum bonorum, quod nunc a me defenditur; Quod si ita se habeat, non possit beatam praestare vitam sapientia. Nam, ut saepe iam dixi, in infirma aetate inbecillaque mente vis naturae quasi per caliginem cernitur; Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; </p>
<p>Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet. Sic exclusis sententiis reliquorum cum praeterea nulla esse possit, haec antiquorum valeat necesse est. Natura sic ab iis investigata est, ut nulla pars caelo, mari, terra, ut poëtice loquar, praetermissa sit; Profectus in exilium Tubulus statim nec respondere ausus; Nunc omni virtuti vitium contrario nomine opponitur. Sed haec nihil sane ad rem; Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt. Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. Quid ait Aristoteles reliquique Platonis alumni? Egone non intellego, quid sit don Graece, Latine voluptas? </p>
<p>Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Praetereo multos, in bis doctum hominem et suavem, Hieronymum, quem iam cur Peripateticum appellem nescio. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Itaque dicunt nec dubitant: mihi sic usus est, tibi ut opus est facto, fac. Quae similitudo in genere etiam humano apparet. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. </p>
<p>Itaque quantum adiit periculum! ad honestatem enim illum omnem conatum suum referebat, non ad voluptatem. Utrum igitur tibi litteram videor an totas paginas commovere? Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Quod maxime efficit Theophrasti de beata vita liber, in quo multum admodum fortunae datur. Comprehensum, quod cognitum non habet? At cum tuis cum disseras, multa sunt audienda etiam de obscenis voluptatibus, de quibus ab Epicuro saepissime dicitur. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Graecis hoc modicum est: Leonidas, Epaminondas, tres aliqui aut quattuor; Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Atque hoc dabitis, ut opinor, si modo sit aliquid esse beatum, id oportere totum poni in potestate sapientis. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Non enim in ipsa sapientia positum est beatum esse, sed in iis rebus, quas sapientia comparat ad voluptatem. </p>
<p>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. A quibus propter discendi cupiditatem videmus ultimas terras esse peragratas. Itaque a sapientia praecipitur se ipsam, si usus sit, sapiens ut relinquat. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Quam ob rem utique idem faciunt, ut si laevam partem neglegerent, dexteram tuerentur, aut ipsius animi, ut fecit Erillus, cognitionem amplexarentur, actionem relinquerent. Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? </p>
</div>
<div class="col-xs-4" id="col-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. </p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est enim effectrix multarum et magnarum voluptatum. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Unum est sine dolore esse, alterum cum voluptate. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Et ille ridens: Video, inquit, quid agas; Nonne igitur tibi videntur, inquit, mala? Sed haec quidem liberius ab eo dicuntur et saepius. Idem iste, inquam, de voluptate quid sentit? Duo Reges: constructio interrete. Cur igitur, cum de re conveniat, non malumus usitate loqui? </p>
<p>Sullae consulatum? Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Sed videbimus. Re mihi non aeque satisfacit, et quidem locis pluribus. Quis enim redargueret? Quae hic rei publicae vulnera inponebat, eadem ille sanabat. </p>
<p>Haec et tu ita posuisti, et verba vestra sunt. Quid est enim aliud esse versutum? Nam si amitti vita beata potest, beata esse non potest. Tecum optime, deinde etiam cum mediocri amico. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Quid enim de amicitia statueris utilitatis causa expetenda vides. In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Illud non continuo, ut aeque incontentae. Ut proverbia non nulla veriora sint quam vestra dogmata. Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur. Quamquam in hac divisione rem ipsam prorsus probo, elegantiam desidero. </p>
<p>Quae animi affectio suum cuique tribuens atque hanc, quam dico. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Quamquam te quidem video minime esse deterritum. Primum quid tu dicis breve? Ego vero volo in virtute vim esse quam maximam; Ad eas enim res ab Epicuro praecepta dantur. </p>
<p>Vulgo enim dicitur: Iucundi acti labores, nec male Euripidesconcludam, si potero, Latine; Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Ut proverbia non nulla veriora sint quam vestra dogmata. Istam voluptatem perpetuam quis potest praestare sapienti? Hoc mihi cum tuo fratre convenit. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Confecta res esset. Oratio me istius philosophi non offendit; </p>
<p>Non igitur bene. Si longus, levis; Primum divisit ineleganter; Quae cum essent dicta, discessimus. Sed nimis multa. Quid adiuvas? Sed potestne rerum maior esse dissensio? Quare ad ea primum, si videtur; </p>
<p>Honesta oratio, Socratica, Platonis etiam. Graece donan, Latine voluptatem vocant. Duo Reges: constructio interrete. Tollenda est atque extrahenda radicitus. </p>
<p>Praeclare hoc quidem. Idem adhuc; An tu me de L. Quae duo sunt, unum facit. Quid de Pythagora? Iam enim adesse poterit. </p>
<p>Quis istud possit, inquit, negare? Haec para/doca illi, nos admirabilia dicamus. Quare conare, quaeso. Quid, quod res alia tota est? </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
!function ($, window, document) {
$.fn.needyColumns = function (options) {
var settings = $.extend({ selector: this.data('cp-selector') || '>[class*=\'col-\'], >.column, >.columns' }, options);
var $window = $(window);
var rows = [];
var viewport = {
top: 0,
height: $window.height()
};
var scrolling = {
curr: null,
last: null,
delta: null,
down: false,
up: false,
update: function () {
this.curr = $window.scrollTop();
this.down = this.curr > this.last;
this.up = !this.down;
this.delta = this.curr - this.last;
this.last = this.curr;
}
};
var frame = {
top: scrolling.curr,
bottom: scrolling.curr + viewport.height
};
$window.on('scroll', function (event) {
scrolling.update();
frame = {
top: scrolling.curr,
bottom: scrolling.curr + viewport.height
};
$.each(rows, function (index, row) {
row.scroll();
});
});
$window.on('resize', function () {
frame = {
top: scrolling.curr,
bottom: scrolling.curr + viewport.height
};
$.each(rows, function (i, row) {
row.init();
});
});
function Row(element, settings) {
this.columns = [];
this.element = element;
this.settings = settings;
this.$element = $(this.element);
this.init();
}
Row.prototype.init = function () {
var row = this;
this.height = this.$element.height();
this.top = this.$element.offset().top;
this.$columns = this.$element.find(settings.selector);
this.$columns.each(function (i, element) {
row.columns.push(new Column(element, row));
});
this.scroll();
};
Row.prototype.scroll = function () {
if (this.height <= viewport.height)
return;
$.each(this.columns, function (i, column) {
column.scroll();
});
};
function Column(element, row) {
var column = this;
this.element = element;
this.row = row;
this.$element = $(this.element);
this.init();
}
Column.prototype.init = function () {
this.height = this.$element.outerHeight();
this.needy = this.height < this.row.height;
this.margin_top = 0;
this.margin_top_max = this.row.height - this.height;
};
Column.prototype.scroll = function () {
if (!this.needy)
return;
if (scrolling.down) {
if (this.height > viewport.height) {
if (frame.bottom > this.$element.offset().top + this.height) {
this.margin_top = frame.bottom - this.row.top - this.height;
}
} else {
if (frame.top > this.$element.offset().top) {
this.margin_top = frame.top - this.row.top;
}
}
} else if (scrolling.up) {
if (frame.top < this.$element.offset().top) {
this.margin_top = frame.top - this.row.top;
}
}
if (this.margin_top < 0)
this.margin_top = 0;
else if (this.margin_top > this.margin_top_max)
this.margin_top = this.margin_top_max;
this.$element.css('margin-top', this.margin_top);
};
return this.each(function (index, element) {
rows.push(new Row(element, settings));
});
};
}(jQuery, window, document);
!function ($, window, document) {
$('.row.needy-columns').needyColumns();
}(jQuery, window, document);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment