final-example

final example for sticky stuff

by Fig77

HTML

<body>
  <main>
  <header class="block">
    <h1>
      this is a very interesting header
    </h1>
  </header>
    <div class="container left">
       <aside class="aside left sticky">
        <div class="margin-center box green margin-bottom-1"></div>
        <div class="margin-center box green margin-bottom-1"></div>
        <div class="margin-center box green margin-bottom-1"></div>
        <div class="margin-center box green margin-bottom-1"></div>
        <div class="margin-center box green margin-bottom-1"></div>
        <div class="margin-center box green margin-bottom-1"></div>
      </aside>
       <article class ="article darker-black right">
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
        <div class="box light-black margin-bottom-1 margin-center-1"></div>
      </article>
    </div>
    <aside class="aside right sticky">
      <div class="margin-center box green margin-bottom-1"></div>
      <div class="margin-center box green margin-bottom-1"></div>
      <div class="margin-center box green margin-bottom-1"></div>
      <div class="margin-center box green margin-bottom-1"></div>
      <div...

CSS

body {
  height: 1900px;
  background: #b2b2b2;
  margin: 0;
}

main {
  height: 1755px;
}

.container {
  width: 334px;
}

.article {
  width: 134px;
  display: block;
}

.aside {
  width: 200px;
}

.box {
  height: 100px;
  width: 100px;
}

.sticky {
  position: sticky;
  top: -50px;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

.margin-bottom-1 {
  margin-bottom: 30px;
}

.margin-center {
  margin-left: 50px;
}

.margin-center-1 {
  margin-left: 16px; 
}

.darker-black {
  background: #212121;
}

.light-black {
  background: #4d4d4d;
}

.green {
  background: green;
}