Merge branch 'develop' into master

README.md

@@ -1,53 +1,93 @@
 # Simple Scrollspy
 
-[Simple scrollspy](https://huukimit.github.io/simple-scrollspy) is lightweight javascript library without jQuery, no dependencies. Only 1.94Kb.
-This is a [demo](https://huukimit.github.io/simple-scrollspy/demo).
+[Simple scrollspy](https://huukimit.github.io/simple-scrollspy) is a lightweight javascript library without jQuery,
+no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc.
+Only 1.94Kb.
+
+This is a [scrollspy demo](https://huukimit.github.io/simple-scrollspy/demo) for my menu in the navigation bar.
 
 ## Install
-You can install by `npm` or download inject `simple-scrollspy.js` file into your HTML code:
+1. Via NPM:
+
 ```npm
 npm install simple-scrollspy
 ```
+
+2. The other way, you also can inject `simple-scrollspy.min.js` file into your HTML code:
+
 ```html
-<script src="/path/to/dist/simple-scrollspy.js"></script>
+<script src="/path/to/dist/simple-scrollspy.min.js"></script>
 ```
 
 ## Usages
+
+Easy for using, syntax just like this:
+
+```html
+scrollSpy(menuElement, options)
+```
+
+This little plugin will add `active` class into your existing menu item when you scroll your page to a matched section by ID.
+If you are giving it a try, make sure that you:
+1. Added CSS for `active` class in your menu item. Because, this plugin do NOT include CSS.
+2. Added ID for your sections.
+    Example: `<section id="first-section">...</section>`
+3. Added an attribute which is an section ID into your menu items. Default is `href`.
+    Example: `"href"="#first-section"`.
+You also replace `href` with the other name by `hrefAttribute` in `options`. 
+
+### Arguments
+
+1. The `menuElement` is query selector to your menu. It is `String` or `HTMLElement` instance.
+2. The `options` is optional. It is type of `Object` which contains properties below:
+
+| Name               | Type     | Default       | Description                        |
+|--------------------|:---------|:--------------|:-----------------------------------|
+| `sectionClass`     | String   | `.scrollspy`  | Query selector to your sections    |
+| `menuActiveTarget` | String   | `li > a`      | Element will be added active class |
+| `offset`           | Number   | 0             | Offset number                      |
+| `hrefAttribute`    | String   | `href`        | The menu item's attribute name which contains section ID |
+| `activeClass`      | String   | `active`      | Active class name will be added into `menuActiveTarget`|
+
+### ES6 example
+
 ```js
 import scrollSpy from 'simple-scrollspy'
 
-scrollSpy('#menu-list', {
-    offset: 100,
-    menuActiveTarget: '.menu__item > a',
-    sectionClass: 'body section.scrollspy',
-    activeClass: 'active'
-})
+const options = {
+    sectionClass: '.scrollspy',     // Query selector to your sections
+    menuActiveTarget: '.menu-item', // Query selector to your elements that will be added `active` class
+    offset: 100                     // Menu item will active before scroll to a matched section 100px
+}
+
+// init:
+scrollSpy(document.getElementById('main-menu'), options)
+
+// or shorter:
+scrollSpy('#main-menu', options)
 ```
-Or:
+
+### Inject static file
+
 ```html
-<script src="/path/to/dist/simple-scrollspy.js"></script>
+<script src="/path/to/dist/simple-scrollspy.min.js"></script>
 <script>
     window.onload = function () {
-        scrollSpy('#menu-list', {
-            offset: 100,
-            menuActiveTarget: '.menu__item > a',
-            sectionClass: 'body section.scrollspy',
-            activeClass: 'active'
+        scrollSpy('#main-menu', {
+            sectionClass: '.scrollspy',
+            menuActiveTarget: '.menu-item',
+            offset: 100
         })
     }
 </script>
 ```
 
-## Arguments
-- The first argument is your menu list selector. Type of `String|HTMLElement`.
-- The second argument is optional. Type of `Object`:
+## Development
 
-| Name          | Type          | Default       | Description |
-| ------------- |:-------------:|:-------------:| :-----------|
-| `offset`      | Number        | 0             | Offset number |
-| `menuActiveTarget` | String | `li > a` | Element will be added active class |
-| `sectionClass` | String | `.scrollspy` | Query selector to your sections |
-| `activeClass` | String | `active` | Active class name |
+```bash
+$ yarn install
+$ yarn dev
+```
 
 ## Helpful links
 - [Documentation](https://huukimit.github.io/simple-scrollspy)

demo/demo.css

@@ -0,0 +1,100 @@
+html, body {
+    padding: 0;
+    margin: 0;
+    font-family: Roboto, sans-serif;
+    font-size: 100%;
+    color: #333333;
+}
+
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 60px;
+    color: #333333;
+    background: #ffffff;
+    overflow: hidden;
+    z-index: 1000;
+    -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
+    -moz-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
+}
+
+.navbar-brand a {
+    text-decoration: none;
+    color: #0097e6;
+}
+
+.navbar .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.menu-item {
+    display: inline-block;
+    font-size: 1.125rem;
+    text-decoration: none;
+    padding: 1rem;
+    color: inherit;
+}
+
+.menu-item:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.menu-item.active {
+    background: #00a8ff;
+    color: #ffffff;
+}
+
+.section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    font-size: 3rem;
+    font-weight: bold;
+    color: #ffffff;
+}
+
+.section:nth-child(2) {
+    background: linear-gradient(#0097e6, #00a8ff);
+}
+
+.section:nth-child(3) {
+    background: #ffffff;
+    color: #333333;
+}
+
+.section:nth-child(4) {
+    background: linear-gradient(#8c7ae6, #9c88ff);
+}
+
+.section:nth-child(5) {
+    background: linear-gradient(#e1b12c, #fbc531);
+}
+
+.section:nth-child(6) {
+    background: linear-gradient(#40739e, #487eb0);
+}
+
+.footer {
+    padding-top: 2rem;
+    padding-bottom: 3rem;
+    text-align: center;
+    background: #353b48;
+    color: #ffffff;
+}
+.footer a {
+    color: #ffffff;
+    text-decoration: none;
+    display: inline-block;
+}