simple sticky

@@ -23,7 +23,7 @@
     </div>
     {{!--shop-tab-nav: 红人首页 | 全部商品--}}
     <div>
-        <nav class="shop-tabs">
+        <nav class="shop-tabs" data-sticky>
             <a href="#" class="shop-tab-nav active">红人首页</a>
             <em>|</em>
             <a href="#" class="shop-tab-nav">全部商品</a>

@@ -24,8 +24,8 @@ module.exports = {
         // imSocket: 'ws://im.yohobuy.com:10240',
         // imCs: 'http://im.yohobuy.com/api',
         // imServer: 'http://im.yohobuy.com/server'
-        api: 'http://192.168.102.205:8080/gateway/',
-        // api: 'http://api.yoho.cn/',
+        // api: 'http://192.168.102.205:8080/gateway/',
+        api: 'http://api.yoho.cn/',
         service: 'http://service.yoho.cn/',
         liveApi: 'http://api.live.yoho.cn/',
         singleApi: 'http://single.yoho.cn/',

@@ -6,15 +6,20 @@
 
 'use strict';
 
+const dataAPI = '[data-sticky]';
+
 var Sticky = function(elem, options) {
     this.options = $.extend({}, Sticky.DEAFAULT, options);
     this.$elem = $(elem);
     this.$holder = $('<div></div>').height(this.$elem.height());
+    this.$holder = this.$elem.wrap(this.$holder).parent();
+
+    this.stickyState = null;
+
+
     this.$target = $(this.options.target)
         .on('scroll.yoho.sticky', $.proxy(this.checkPosition, this));
 
-    this.$elem.wrapper(this.$holder);
-
     this.checkPosition();
 };
 
@@ -24,11 +29,47 @@ Sticky.DEAFAULT = {
 };
 
 Sticky.prototype.checkPosition = function() {
-    if (!this.$elem.is('::visible')) {
+    let options = this.options;
+
+    if (!this.$elem.is(':visible')) {
         return;
     }
+
+    let offsetTop = this.$holder.offset().top - options.top;
+    let scrollTop = this.$target.scrollTop();
+
+    let willSticky = scrollTop >= offsetTop;
+
+    this.$elem.toggleClass('sticky', willSticky);
 };
 
 
+function Plugin(option) {
+    this.each(function() {
+        let $this = $(this);
+        let data = $this.data('yoho.sticky');
+        let options = typeof option === 'object' && option;
+
+        if (!data) {
+            $this.data('yoho.sticky', new Sticky($this, options));
+        }
+
+        if (typeof option === 'string') {
+            $this[option]();
+        }
+    });
+}
+
+$.fn.Stricky = Plugin;
+$.fn.Stricky.Constructor = Sticky;
+
+window.onload = function() {
+    $(dataAPI).each(function() {
+        let $this = $(this);
+
+        Plugin.call($this);
+    });
+};
+
 
 module.exports = Sticky;

 require('product/shop/redshop.page.css');
 
+require('plugin/sticky');
 require('./shop/coupon');

+.sticky {
+    position: fixed;
+    top: 0;
+}
\ No newline at end of file

 .shop-tabs {
     display: flex;
     justify-content: space-around;
+    width: 100%;
     font-size: 30px;
     line-height: 80px;
     border-top: 1PX solid #dededf;
     border-bottom: 1PX solid #dededf;
+    background-color: #fff;
 
     em {
         color: #dededf;
     }
+
+    &.sticky {
+        z-index: 10;
+    }
 }
 
 .shop-tab-nav {

 @charset "utf-8";
 
+@import "../../layout/sticky";
 @import "shop-index-coupon";
 @import "reds-shop/header";
 @import "reds-shop/nav-tab";