Scrollbar!

css/css.scss

@@ -287,6 +287,30 @@ footer.block {
   }
 }
 
+#scrollbar {
+  h2 {
+    &:last-child {
+      display: none;
+    }
+  }
+  &.fixed {
+    position: fixed;
+  }
+  &.text-change {
+    h2 {
+      &:first-child {
+        display: none;
+      }
+      &:last-child {
+        display: block;
+      }
+    }
+  }
+  &.disappear {
+    display: none;
+  }
+}
+
 @include tablet {
 
   h1 {

docker-compose.override.yml.dist

@@ -1,15 +1,6 @@
 version: '2'
 
 services:
-  nginx-proxy:
-    image: jwilder/nginx-proxy
-    ports:
-      - "80:80"
-      - "443:443"
-    volumes:
-      - /var/run/docker.sock:/tmp/docker.sock:ro
-      - ./config/docker/certs:/etc/nginx/certs
-
   web:
     build:
       context: .

index.php

@@ -60,9 +60,10 @@
                 <h1>Oscar Fanelli</h1>
             </div>
         </div>
-        <div class="block block-inverse">
+        <div class="block block-inverse" id="scrollbar">
             <div>
-                <h2>Creative and <span class="change" data-hidden="eccentric">arrogant</span> CTO</h2>
+                <h2>Creative and <span class="change" data-hidden="arrogant">eccentric</span> CTO</h2>
+                <h2 class="hidden">Well... i'm tired to follow the page!<br />Bye bye in <span class="pixel-counter">0</span> pixels!</h2>
             </div>
         </div>
         <a href="https://github.com/pensiero/oscarfanelli" target="_blank" id="see-this-on-github">
@@ -71,7 +72,7 @@
         </a>
     </header>
 
-    <div class="block block-spaced">
+    <div class="block block-spaced" id="block-intro">
         <div>
             <p>
                 In my spare time, I work.<br />

js/js.js

@@ -1,4 +1,62 @@
+var Scrollbar = {
+
+    scrollbar: $('#scrollbar'),
+    scrollbarStartPosition: null,
+    breakpoint1: null,
+    breakpoint2: null,
+
+    secondBreakpointSpace: 200,
+
+    checkPosition: function() {
+
+        var scroll = $(window).scrollTop();
+
+        // change the scrollbar classes
+        $(this.scrollbar).toggleClass('fixed', scroll >= this.scrollbarStartPosition);
+        $(this.scrollbar).toggleClass('text-change', scroll >= this.breakpoint1);
+        $(this.scrollbar).toggleClass('disappear', scroll >= this.breakpoint2);
+
+        // update the counter (how many pixel left)
+        $(this.scrollbar).find('.pixel-counter').html(this.breakpoint2 - scroll);
+    },
+
+    initStartPosition: function() {
+
+        this.scrollbarStartPosition = $(this.scrollbar).position().top;
+    },
+
+    initBreakpoints: function() {
+
+        // first breakpoint is the scrollbar start position + 500
+        this.breakpoint1 = this.scrollbarStartPosition + ($('#block-intro').height() / 2);
+
+        this.breakpoint2 = this.scrollbarStartPosition + $('#block-intro').height() - this.secondBreakpointSpace;
+
+        if (this.breakpoint2 - this.breakpoint1 < 0) {
+            this.breakpoint2 = this.breakpoint1 + 500;
+        }
+
+    },
+
+    init: function() {
+
+        // init start position of the scrollbar
+        this.initStartPosition();
+
+        // init breakpoints
+        this.initBreakpoints();
+
+        // check a function on scroll
+        $(window).scroll(function() {
+            this.checkPosition();
+        }.bind(this));
+
+    }
+
+};
+
 $(document).ready(function() {
+
     $('.change').click(function(e) {
         e.preventDefault();
         $(this).toggleClass('changed');
@@ -13,5 +71,8 @@ $(document).ready(function() {
     $('.itself').click(function(e) {
         e.preventDefault();
         $(this).parent().remove();
-    })
+    });
+
+    // scrollbar
+    Scrollbar.init();
 });