https://dulichvietnam.com.vn/js/mnfixed.js

1/*
2===============================
3============MNFIXED============
4===============================
5      Version: 1.1
6       Author: Hoang Minh Ngoc
7Date Publish : 28/09/2017
8*/
9(function($){
10    class mnfixed{
11        constructor(ele,opt){
12            this.ele = ele;
13            this.defaults = {
14                limit:'',
15                top:0,
16                break:0
17            };
18            this.options = $.extend({},this.defaults,opt);
19            this.init();
20            this.run();
21        }
22    }
23    mnfixed.prototype.init = function(){
24        var _ = this;
25        // WRAP ELEMENT TO CLASS
26        _.ele.wrap("<div class='mnfixed_self'></div>");
27        _.ele.parents(".mnfixed_self").wrap("<div class='mnfixed_wrap'></div>");
28        // SET VAR
29        _.self  = _.ele.parents(".mnfixed_self");
30        _.wrap  = _.ele.parents(".mnfixed_wrap");
31        _.limit = $(_.options.limit);
32        _.top   = _.options.top;
33        _.break = _.options.break;
34        // SETUP WIDTH AND POSITION
35        _.self.css({
36            "width":_.ele.outerWidth(),
37            "z-index":"101",
38        });
39        _.self.parents(".mnfixed_wrap").css({
40            "position":"relative",
41            "height": $(_.ele).outerHeight()
42        });
43    }
44    mnfixed.prototype.run = function(){
45        var _ = this;
46        $(window).bind("scroll", function(){
47            _.a = $(window).scrollTop() + _.top;
48            _.b = _.wrap.offset().top;
49            if(typeof _.limit.offset()=="object"){
50                _.c = _.limit.offset().top + _.limit.outerHeight();
51                _.d = _.wrap.offset().top + _.wrap.outerHeight() + _.top;
52                _.e = $(window).scrollTop() + _.wrap.outerHeight() + _.top;
53                if((_.c > _.d) && (_.a>=_.b) && ($(window).innerWidth() > _.break)){
54                    if(_.e > _.c){
55                        _.C();
56                    }
57                    else{
58                        _.A();
59                    }
60                }
61                else{
62                    _.B();
63                }  
64            }
65            else if((_.a>=_.b) && ($(window).innerWidth() > _.break)){
66                _.A();
67            }
68            else{
69                _.B();
70            }
71        });
72        $(window).resize(function(){
73            _.self.css({
74                "width":_.wrap.outerWidth()
75            });
76            _.wrap.css({
77                "position":"relative",
78                "height": _.self.outerHeight()
79            });
80            if($(window).innerWidth() > _.break){
81                if(_.ele.hasClass("mnfixed_fixed")){
82                    _.A();
83                }
84                else if(_.ele.hasClass("mnfixed_fixed_fixed")){
85                    _.D();
86                }
87            }
88            else{
89                _.E();
90            }
91        });
92        $(window).load(function(){
93            if($(window).innerWidth() > _.break){
94                if(_.ele.hasClass("mnfixed_fixed")){
95                    _.A();
96                }
97                else if(_.ele.hasClass("mnfixed_fixed_fixed")){
98                    _.D();
99                }
100            }
101            else{
102                _.E();
103            }
104        });
105    }
106    mnfixed.prototype.A = function(){
107        var _ = this;
108        _.ele.addClass("mnfixed_fixed");
109        _.self.css({
110            "position":"fixed",
111            "top":0 + _.options.top,
112            "left":_.wrap.offset().left
113        });
114    }
115    mnfixed.prototype.B = function(){
116        var _ = this;
117        _.ele.removeClass("mnfixed_fixed");
118        _.self.css({
119            "position":"initial",
120            "top":"initial",
121            "left":"initial",
122        });
123    }
124    mnfixed.prototype.C = function(){
125        var _ = this;
126        _.self.removeClass("mnfixed_fixed");
127        _.self.addClass("mnfixed_fixed_fixed");
128        _.self.css({
129            "position":"absolute",
130            "top":_.c - _.b - _.self.outerHeight(),
131            "left":0,
132        });
133    }
134    mnfixed.prototype.D = function(){
135        var _ = this;
136        _.self.removeClass("mnfixed_fixed_fixed");
137        _.self.addClass("mnfixed_fixed");
138    }
139    mnfixed.prototype.E = function(){
140        var _ = this;
141        _.ele.removeClass("mnfixed_fixed");
142        _.ele.removeClass("mnfixed_fixed_fixed");
143        _.self.removeClass("mnfixed_fixed");
144        _.self.removeClass("mnfixed_fixed_fixed");
145        _.self.css({
146            "position":"initial",
147            "left":"initial",
148            "width":"initial",
149            "top":"initial"
150        });
151        _.wrap.css({
152            "position":"relative",
153            "height": "initial"
154        });
155    }
156    $.prototype.mnfixed = function(options) {
157        var _ = this;
158        if(typeof _.offset() == "object"){
159            var opt = arguments[0];
160            _ = new mnfixed(_, opt);
161        }
162        else{
163            console.log("No Excertion !!!!!, ["+_+"]");
164        }
165    }
166})(jQuery);