GRjeaNG

grjeang.markdown

GRjeaNG

A Pen by EmekaOrji on CodePen.

License.

index.html

<div id="nav">Scroll to see the Magic</div>
<div id="body">
  <div class="cont A">
    <h1>Slide #1</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente. Quam tu ponis in verbis, ego positam in re putabam. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Cum autem assumpta ratío est, tanto in dominatu locatur, ut omnia illa prima naturae hulus tutelae subiciantur. Hoc mihi cum tuo fratre convenit. Illo enim addito iuste fit recte factum, per se autem hoc ipsum reddere in officio ponitur. 
    Peccata autem partim esse tolerabilia, partim nullo modo, propterea quod alia peccata plures, alia pauciores quasi numeros officii praeterirent. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Illorum vero ista ipsa quam exilia de virtutis vi! Quam tantam volunt esse, ut beatum per se efficere possit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. De maximma autem re eodem modo, divina mente atque natura mundum universum et eius maxima partis administrari. Nam haec ipsa mihi erunt in promptu, quae modo audivi, nec ante aggrediar, quam te ab istis, quos dicis, instructum videro. Non est igitur voluptas bonum. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Quamquam id quidem, infinitum est in hac urbe; Quod ea non occurrentia fingunt, vincunt Aristonem; 
    Duo Reges: constructio interrete. Tanta vis admonitionis inest in locis; Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Hic Speusippus, hic Xenocrates, hic eius auditor Polemo, cuius illa ipsa sessio fuit, quam videmus. Et quod est munus, quod opus sapientiae? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Sed et illum, quem nominavi, et ceteros sophistas, ut e Platone intellegi potest, lusos videmus a Socrate. Si enim ad populum me vocas, eum. Aut etiam, ut vestitum, sic sententiam habeas aliam domesticam, aliam forensem,
  </div>
  <div class="cont B">
    <h1>Slide #2</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente. Quam tu ponis in verbis, ego positam in re putabam. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Cum autem assumpta ratío est, tanto in dominatu locatur, ut omnia illa prima naturae hulus tutelae subiciantur. Hoc mihi cum tuo fratre convenit. Illo enim addito iuste fit recte factum, per se autem hoc ipsum reddere in officio ponitur. 
    Peccata autem partim esse tolerabilia, partim nullo modo, propterea quod alia peccata plures, alia pauciores quasi numeros officii praeterirent. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Illorum vero ista ipsa quam exilia de virtutis vi! Quam tantam volunt esse, ut beatum per se efficere possit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. De maximma autem re eodem modo, divina mente atque natura mundum universum et eius maxima partis administrari. Nam haec ipsa mihi erunt in promptu, quae modo audivi, nec ante aggrediar, quam te ab istis, quos dicis, instructum videro. Non est igitur voluptas bonum. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Quamquam id quidem, infinitum est in hac urbe; Quod ea non occurrentia fingunt, vincunt Aristonem; 
    Duo Reges: constructio interrete. Tanta vis admonitionis inest in locis; Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Hic Speusippus, hic Xenocrates, hic eius auditor Polemo, cuius illa ipsa sessio fuit, quam videmus. Et quod est munus, quod opus sapientiae? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere.
  </div>
  <div class="cont C">
    <h1>Slide #3</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente. Quam tu ponis in verbis, ego positam in re putabam. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Cum autem assumpta ratío est, tanto in dominatu locatur, ut omnia illa prima naturae hulus tutelae subiciantur. Hoc mihi cum tuo fratre convenit. Illo enim addito iuste fit recte factum, per se autem hoc ipsum reddere in officio ponitur. 
    Peccata autem partim esse tolerabilia, partim nullo modo, propterea quod alia peccata plures, alia pauciores quasi numeros officii praeterirent. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Illorum vero ista ipsa quam exilia de virtutis vi! Quam tantam volunt esse, ut beatum per se efficere possit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. De maximma autem re eodem modo, divina mente atque natura mundum universum et eius maxima partis administrari. Nam haec ipsa mihi erunt in promptu, quae modo audivi, nec ante aggrediar, quam te ab istis, quos dicis, instructum videro. Non est igitur voluptas bonum. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Quamquam id quidem, infinitum est in hac urbe; Quod ea non occurrentia fingunt, vincunt Aristonem; 
    Duo Reges: constructio interrete. Tanta vis admonitionis inest in locis; Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Hic Speusippus, hic Xenocrates, hic eius auditor Polemo, cuius illa ipsa sessio fuit, quam videmus. Et quod est munus, quod opus sapientiae? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere.
  </div>
  <div class="cont D">
    <h1>Slide #4</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente. Quam tu ponis in verbis, ego positam in re putabam. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Cum autem assumpta ratío est, tanto in dominatu locatur, ut omnia illa prima naturae hulus tutelae subiciantur. Hoc mihi cum tuo fratre convenit. Illo enim addito iuste fit recte factum, per se autem hoc ipsum reddere in officio ponitur. 
    Peccata autem partim esse tolerabilia, partim nullo modo, propterea quod alia peccata plures, alia pauciores quasi numeros officii praeterirent. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Illorum vero ista ipsa quam exilia de virtutis vi! Quam tantam volunt esse, ut beatum per se efficere possit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. De maximma autem re eodem modo, divina mente atque natura mundum universum et eius maxima partis administrari. Nam haec ipsa mihi erunt in promptu, quae modo audivi, nec ante aggrediar, quam te ab istis, quos dicis, instructum videro. Non est igitur voluptas bonum. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Quamquam id quidem, infinitum est in hac urbe; Quod ea non occurrentia fingunt, vincunt Aristonem; 
    Duo Reges: constructio interrete. Tanta vis admonitionis inest in locis; Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Hic Speusippus, hic Xenocrates, hic eius auditor Polemo, cuius illa ipsa sessio fuit, quam videmus. Et quod est munus, quod opus sapientiae? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere.
  </div>
  <div class="cont E">
    <h1>Slide #5</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente. Quam tu ponis in verbis, ego positam in re putabam. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Cum autem assumpta ratío est, tanto in dominatu locatur, ut omnia illa prima naturae hulus tutelae subiciantur. Hoc mihi cum tuo fratre convenit. Illo enim addito iuste fit recte factum, per se autem hoc ipsum reddere in officio ponitur. 
    Peccata autem partim esse tolerabilia, partim nullo modo, propterea quod alia peccata plures, alia pauciores quasi numeros officii praeterirent. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Illorum vero ista ipsa quam exilia de virtutis vi! Quam tantam volunt esse, ut beatum per se efficere possit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. De maximma autem re eodem modo, divina mente atque natura mundum universum et eius maxima partis administrari. Nam haec ipsa mihi erunt in promptu, quae modo audivi, nec ante aggrediar, quam te ab istis, quos dicis, instructum videro. Non est igitur voluptas bonum. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Quamquam id quidem, infinitum est in hac urbe; Quod ea non occurrentia fingunt, vincunt Aristonem; 
    Duo Reges: constructio interrete. Tanta vis admonitionis inest in locis; Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Hic Speusippus, hic Xenocrates, hic eius auditor Polemo, cuius illa ipsa sessio fuit, quam videmus. Et quod est munus, quod opus sapientiae? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere.
  </div>
</div>
<div id="foot"><a href="#"><span class="material-icons">arrow_circle_up</span><p>Back to the Top</p></a></div>

style.scss

html {
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
}
#nav {
  background-color: whitesmoke;
  height: 10%;
  font-size: 3em;
  font-family: 'Yusei Magic', sans-serif;
  text-align: center;
  position: sticky;
  top: 0;
}
#body {
  font-family: 'Yusei Magic', sans-serif;
  margin: 0 20% 0%;
  margin-bottom: 0;
  .cont {
    padding: 3%;
  }
  .A {
    background-color: red;
    box-shadow: 0 5px 10px -3px red;
  }
  .B {
    padding-top: 5%;
    background-color: green;
    box-shadow: 0 5px 10px -3px green;
    position: sticky;
    bottom: 0;
    z-index: -1;
  }
  .C {
    padding-top: 3%;
    background-color: gold;
    box-shadow: 0 5px 10px -3px gold;
    z-index: -2;
    position: sticky;
    bottom: 0;
  }
  .D {
    padding-top: 3%;
    background-color: blue;
    box-shadow: 0 5px 10px -3px blue;
    z-index: -3;
    position: sticky;
    bottom: 0;
  }
  .E {
    padding-top: 3%;
    background-color: purple;
    box-shadow: 0 10px 10px -3px purple;
    z-index: -4;
    position: sticky;
    bottom: 0;
  }
}
#foot {
  position: sticky;
  bottom: 0;
  height: 70px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.488);
  a {
    text-decoration: none;
    font-family: 'Yusei Magic', sans-serif;
    color: #cccccc;
    transition: all 0.15s ease-in-out;
    &:hover {
      color: #ffffff;
    }
    .material-icons {
      font-size: 2.5em;
    }
  }
}

Position Sticky Tricks