adding smaller bugfix

demo-386.scss

@@ -0,0 +1,197 @@
+/**
+ * variables
+ *
+ */
+
+$text-color: #000;
+$link-color: #fefe5b;
+$background-color: #000084;
+$background-contrast-color: #bbbbbb;
+
+
+/**
+ * default elements
+ *
+ */
+
+body {
+    color: $text-color;
+    background-color: $background-color;
+    font-family: 'PxPlus IBM VGA8', sans-serif;
+    font-style: normal;
+    font-size: 1.2rem;
+}
+
+*:first-letter {
+    color: $link-color;
+}
+
+a {
+    color: $text-color;
+    text-decoration: none;
+}
+
+
+/**
+ * navigation
+ *
+ *
+ */
+
+nav {
+    ul {
+        list-style: none;
+        border: 3px solid #000;
+        margin: 0;
+        padding: 0.6em 0.8em;
+
+        a {
+            display: block;
+            padding: 0.1em;
+            margin: -0.1em;
+
+            &:hover, &.current {
+                color: #fff;
+                background-color: $text-color;
+            }
+        }
+    }
+}
+
+
+/**
+ * footer
+ *
+ *
+ */
+
+footer {
+    position: absolute;
+    bottom: 0;
+    z-index: -1;
+
+    text-align: center;
+    font-size: 3rem;
+    width: 100%;
+
+    background: #000;
+    padding: 0.8em 0;
+
+    i {
+        color: #fff !important;
+    }
+}
+
+
+/**
+ * panel
+ *
+ *
+ */
+
+.panel {
+    padding: 6px 0;
+    background-color: $background-contrast-color;
+}
+
+
+/**
+ * icons
+ *
+ *
+ */
+
+[class^="icon-tiny"], [class*=" icon-tiny"] {
+    font-family: 'PxPlus IBM VGA8', sans-serif !important;
+    font-style: normal;
+    color: $link-color;
+}
+
+.icon-tiny-hamburger-open,  .icon-tiny-hamburger-close {
+    position: absolute;
+    top: 3px;
+    transition: transform .2s;
+    margin: 3px;
+
+    &:after {
+        content: '\2bc5';
+    }
+}
+
+.icon-tiny-hamburger-open {
+    transform: rotate(0deg);
+}
+
+.icon-tiny-hamburger-close {
+    transform: rotate(180deg);
+}
+
+
+/**
+ * tiny-tiny-hamburger
+ *
+ *
+ */
+
+.tiny-hamburger {
+    &__inner {
+        padding: 4px 8px 5px;
+    }
+
+    // modal with animation
+    &__modal {
+        height: auto;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.2s;
+    }
+
+    &__button {
+        appearance: none;
+        border: none;
+        background: transparent;
+        padding: 0.3em 0.5em;
+
+        &:hover {
+            cursor: pointer;
+            outline: none;
+            background-color: $background-contrast-color;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+.navbar {
+    position: fixed;
+    width: 100%;
+    text-align: center;
+    background-color: white;
+
+    li {
+        display: inline-block;
+        margin: 0 0.3em;
+
+        a {
+            display: block;
+            transition: all .1s ease-in-out;
+
+            &:hover {
+                transform: scale(1.3);
+            }
+        }
+
+        &.current {
+            a {
+                transform: scale(1.3);
+            }
+        }
+    }
+}
+
+.section {
+    padding: 6em;
+    line-height: 1.8;
+}

dist/css/demo-386.css

@@ -0,0 +1,186 @@
+@charset "UTF-8";
+
+/**
+ * variables
+ *
+ */
+
+/**
+ * default elements
+ *
+ */
+
+body {
+  color: #000;
+  background-color: #000084;
+  font-family: "PxPlus IBM VGA8", sans-serif;
+  font-style: normal;
+  font-size: 1.2rem;
+}
+
+*:first-letter {
+  color: #fefe5b;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+/**
+ * navigation
+ *
+ *
+ */
+
+nav ul {
+  list-style: none;
+  border: 3px solid #000;
+  margin: 0;
+  padding: 0.6em 0.8em;
+}
+
+nav ul a {
+  display: block;
+  padding: 0.1em;
+  margin: -0.1em;
+}
+
+nav ul a:hover,
+nav ul a.current {
+  color: #fff;
+  background-color: #000;
+}
+
+/**
+ * footer
+ *
+ *
+ */
+
+footer {
+  position: absolute;
+  bottom: 0;
+  z-index: -1;
+  text-align: center;
+  font-size: 3rem;
+  width: 100%;
+  background: #000;
+  padding: 0.8em 0;
+}
+
+footer i {
+  color: #fff !important;
+}
+
+/**
+ * panel
+ *
+ *
+ */
+
+.panel {
+  padding: 6px 0;
+  background-color: #bbbbbb;
+}
+
+/**
+ * icons
+ *
+ *
+ */
+
+[class^=icon-tiny],
+[class*=" icon-tiny"] {
+  font-family: "PxPlus IBM VGA8", sans-serif !important;
+  font-style: normal;
+  color: #fefe5b;
+}
+
+.icon-tiny-hamburger-open,
+.icon-tiny-hamburger-close {
+  position: absolute;
+  top: 3px;
+  transition: transform 0.2s;
+  margin: 3px;
+}
+
+.icon-tiny-hamburger-open:after,
+.icon-tiny-hamburger-close:after {
+  content: "\2BC5";
+}
+
+.icon-tiny-hamburger-open {
+  transform: rotate(0deg);
+}
+
+.icon-tiny-hamburger-close {
+  transform: rotate(180deg);
+}
+
+/**
+ * tiny-tiny-hamburger
+ *
+ *
+ */
+
+.tiny-hamburger__inner {
+  padding: 4px 8px 5px;
+}
+
+.tiny-hamburger__modal {
+  height: auto;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s;
+}
+
+.tiny-hamburger__button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0.3em 0.5em;
+}
+
+.tiny-hamburger__button:hover {
+  cursor: pointer;
+  outline: none;
+  background-color: #bbbbbb;
+}
+
+.tiny-hamburger__button:focus {
+  outline: none;
+}
+
+.navbar {
+  position: fixed;
+  width: 100%;
+  text-align: center;
+  background-color: white;
+}
+
+.navbar li {
+  display: inline-block;
+  margin: 0 0.3em;
+}
+
+.navbar li a {
+  display: block;
+  transition: all 0.1s ease-in-out;
+}
+
+.navbar li a:hover {
+  transform: scale(1.3);
+}
+
+.navbar li.current a {
+  transform: scale(1.3);
+}
+
+.section {
+  padding: 6em;
+  line-height: 1.8;
+}
+

dist/index.html

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" type="text/css" rel="stylesheet" />
-    <link href="css/demo.css" type="text/css" rel="stylesheet" />
+    <link href="css/demo-386.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
     <div class="panel">
@@ -63,6 +63,6 @@
             <i class="icon icon-github"></i>
         </a>
     </footer>
-    <script src="js/demo.js"></script>
+    <script src="js/demo-386.js"></script>
 </body>
 </html>

dist/js/demo.js

@@ -2562,7 +2562,7 @@ __webpack_require__.r(__webpack_exports__);
     state:
     {
         options: {
-            offset: 100
+            offset: 0
         }
     },
 
@@ -2590,15 +2590,16 @@ __webpack_require__.r(__webpack_exports__);
 
         // adding scroll smooth, get all elements with hash
         this.scroll = new smooth_scroll__WEBPACK_IMPORTED_MODULE_0___default.a('.tiny-one-page__inner a[href*="#"]', {
-            offset: function() {
+            offset: () => {
                 return this.state.options.offset;
             }
         });
 
         window.addEventListener('scroll', this.handleScroll.bind(this), false);
 
+        // if hash is set,
         if (window.location.hash) {
-            this.addClass(this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']"));
+            this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']").click();
         } else {
             this.addClass(this.$$(".tiny-one-page__inner a")[0]);
         }
@@ -2609,9 +2610,27 @@ __webpack_require__.r(__webpack_exports__);
      *  @param  {Object}  element
      *  @return {Boolean}
      */
-    isVisible(element)
+    isVisible(element, next)
     {
-        return ((element.offsetHeight + element.offsetTop) - this.state.options.offset) > window.pageYOffset;
+        let result = false;
+
+        console.log(window.outerHeight);
+
+        if (element.id === 'one') {
+            console.log('current offsetTop ' + element.offsetTop);
+            console.log('next offsetTop ' + next.offsetTop);
+            console.log('pageYOffset ' + window.pageYOffset);
+        }
+
+        if (((element.offsetTop <= window.pageYOffset) && (element.offsetTop + element.offsetHeight) > window.pageYOffset)) {
+            result = true;
+        }
+
+        if (result === true && next && window.pageYOffset > element.offsetTop && next.offsetTop > window.pageYOffset) {
+            result = false;
+        }
+
+        return result;
     },
 
     /**
@@ -2653,17 +2672,31 @@ __webpack_require__.r(__webpack_exports__);
         // if found
         let hasFound = false;
 
+        let result = undefined;
+
         elements.forEach(function(element, index) {
 
-            const target = document.querySelector(element.hash);
+            let target = document.querySelector(element.hash);
+
+            // check if there is a next element
+            let next = undefined;
 
-            if (this.isVisible(target) && hasFound === false) {
-                this.addClass(element);
-                hasFound = true;
-            } else {
-                this.removeClass(element);
+            if (elements[index + 1]) {
+                next = document.querySelector(elements[index + 1].hash);
             }
+
+            if (!result && ((target.offsetTop <= window.pageYOffset) && (target.offsetTop + target.offsetHeight) > window.pageYOffset)) {
+                result = target;
+
+                if (next && window.pageYOffset > target.offsetTop && next.offsetTop > window.pageYOffset) {
+                    result = next;
+                }
+            }
+
+            this.removeClass(element);
         }.bind(this));
+
+        this.addClass(this.$(".tiny-one-page__inner a[href$='" + result.id + "']"));
     }
   },
 

mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/dist/js/demo.js": "/dist/js/demo.js",
-    "/dist/css/demo.css": "/dist/css/demo.css"
+    "/dist/js/demo-386.js": "/dist/js/demo-386.js",
+    "/dist/css/demo-386.css": "/dist/css/demo-386.css"
 }

src/TinyOnePage.riot

@@ -1,25 +1,36 @@
 <tiny-one-page>
     <div class="tiny-one-page">
         <div class="tiny-one-page__inner"></div>
+        <button class="tiny-one-page__button">
+            <i class="icon icon-menu"></i>
+        </button>
     </div>
 
     <script>
 
         import SmoothScroll from 'smooth-scroll';
 
+        /**
+         *  tiny-one-page.riot
+         *
+         *  Tiny Component to one page navigation
+         *
+         *  <tiny-one-page>
+         *      <ul>
+         *          <li><a href="#home">Home</a></li>
+         *          <li><a href="#blog">Blog</a></li>
+         *          <li><a href="#contact">Contact</a></li>
+         *      </ul>
+         *  </tiny-one-page>
+         *
+         *  @author Björn Hase
+         *  @license http://opensource.org/licenses/MIT The MIT License
+         *  @link https://gitlab.tentakelfabrik.de/tentakelfabrik/tiny-components/tiny-one-page Gitlab Repository
+         *
+         */
+
         export default
         {
-            /**
-             *
-             *
-             */
-            state:
-            {
-                options: {
-                    offset: 100
-                }
-            },
-
             /**
              *  getting innerHTML and remove
              *
@@ -43,31 +54,18 @@
                 wrapper.innerHTML = this.content;
 
                 // adding scroll smooth, get all elements with hash
-                this.scroll = new SmoothScroll('.tiny-one-page__inner a[href*="#"]', {
-                    offset: function() {
-                        return this.state.options.offset;
-                    }
-                });
+                this.scroll = new SmoothScroll('.tiny-one-page__inner a[href*="#"]');
 
                 window.addEventListener('scroll', this.handleScroll.bind(this), false);
 
+                // if hash is set,
                 if (window.location.hash) {
-                    this.addClass(this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']"));
+                    this.$(".tiny-one-page__inner a[href$='" + window.location.hash + "']").click();
                 } else {
                     this.addClass(this.$$(".tiny-one-page__inner a")[0]);
                 }
             },
 
-            /**
-             *
-             *  @param  {Object}  element
-             *  @return {Boolean}
-             */
-            isVisible(element)
-            {
-                return ((element.offsetHeight + element.offsetTop) - this.state.options.offset) > window.pageYOffset;
-            },
-
             /**
              *  add css class to parent element
              *
@@ -95,7 +93,7 @@
             },
 
             /**
-             *  handle scrolling,
+             *  handle scrolling and check visibility of elements from navigation
              *
              *  @param  {Object} event
              */
@@ -107,17 +105,48 @@
                 // if found
                 let hasFound = false;
 
+                // get result
+                let result = undefined;
+
                 elements.forEach(function(element, index) {
 
-                    const target = document.querySelector(element.hash);
+                    // getting target
+                    let target = document.querySelector(element.hash);
+
+                    // check if there is a next element
+                    let next = undefined;
+
+                    // getting offsetTop
+                    let offsetTop = target.offsetTop;
+
+                    // check for next element
+                    if (elements[index + 1]) {
+                        next = document.querySelector(elements[index + 1].hash);
+                    }
+
+                    if (index === 0) {
+                        offsetTop = 0;
+                    }
+
+                    // check if element is visible
+                    if (!result && ((offsetTop <= window.pageYOffset) && (offsetTop + target.offsetHeight) > window.pageYOffset)) {
+                        result = target;
 
-                    if (this.isVisible(target) && hasFound === false) {
-                        this.addClass(element);
-                        hasFound = true;
-                    } else {
-                        this.removeClass(element);
+                        // check if the next element is showing up
+                        if (next && window.pageYOffset > offsetTop && next.offsetTop > window.pageYOffset && next.offsetTop < (window.pageYOffset + 800)) {
+                            result = next;
+                        }
                     }
+
+                    // remove class from each element
+                    this.removeClass(element);
+
                 }.bind(this));
+
+                // @TODO small workaround to ignore gaps between elements where no one found
+                if (result) {
+                    this.addClass(this.$(".tiny-one-page__inner a[href$='" + result.id + "']"));
+                }
             }
         }
 

src/demo.scss

@@ -1,31 +0,0 @@
-.navbar {
-    position: fixed;
-    width: 100%;
-    text-align: center;
-    background-color: white;
-
-    li {
-        display: inline-block;
-        margin: 0 0.3em;
-
-        a {
-            display: block;
-            transition: all .1s ease-in-out;
-
-            &:hover {
-                transform: scale(1.3);
-            }
-        }
-
-        &.current {
-            a {
-                transform: scale(1.3);
-            }
-        }
-    }
-}
-
-.section {
-    padding: 6em;
-    line-height: 1.8;
-}

webpack.mix.js

@@ -26,5 +26,5 @@ mix.webpackConfig({
     ]}
 });
 
-mix.js('demo.js', 'dist/js')
-mix.sass('src/demo.scss', 'dist/css');
+mix.js('demo-386.js', 'dist/js')
+mix.sass('demo-386.scss', 'dist/css');