https://recyclism.com/assets/dropdown/js/navbar-dropdown.js

1    jQuery(function($){
2
3    var DATA_KEY = 'bs.navbar-dropdown';
4    var EVENT_KEY = '.' + DATA_KEY;
5    var DATA_API_KEY = '.data-api';
6    
7    var Event = {
8        COLLAPSE: 'collapse' + EVENT_KEY,
9        CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
10        SCROLL_DATA_API: 'scroll' + EVENT_KEY + DATA_API_KEY,
11        RESIZE_DATA_API: 'resize' + EVENT_KEY + DATA_API_KEY,
12        COLLAPSE_SHOW: 'show.bs.collapse',
13        COLLAPSE_HIDE: 'hide.bs.collapse',
14        DROPDOWN_COLLAPSE: 'collapse.bs.nav-dropdown'
15    };
16
17    var ClassName = {
18        IN: 'in',
19        OPENED: 'opened',
20        BG_COLOR: 'bg-color',
21        DROPDOWN_OPEN: 'navbar-dropdown-open',
22        SHORT: 'navbar-short'
23    };
24
25    var Selector = {
26        BODY: 'body',
27        BASE: '.navbar-dropdown',
28        TOGGLER: '.navbar-toggler[aria-expanded="true"]',
29        TRANSPARENT: '.transparent',
30        FIXED_TOP: '.navbar-fixed-top'
31    };
32
33    function _dataApiHandler(event) {
34
35        if (event.type === 'resize') {
36
37            $(Selector.BODY).removeClass(ClassName.DROPDOWN_OPEN);
38            $(Selector.BASE).find(".navbar-collapse").removeClass("show");
39            $(Selector.BASE)
40                .removeClass(ClassName.OPENED)
41                .find(Selector.TOGGLER).each(function(){
42                    
43                    $( $(this).attr('data-target') )
44                        .removeClass(ClassName.IN)
45                        .add(this)
46                        .attr('aria-expanded', 'false');
47
48                });
49
50        }
51
52        var scrollTop = $(this).scrollTop();
53        $(Selector.BASE).each(function(){
54
55            if (!$(this).is(Selector.FIXED_TOP)) return;
56
57            if ($(this).is(Selector.TRANSPARENT) && !$(this).hasClass(ClassName.OPENED)) {
58
59                if (scrollTop > 0) {
60                    $(this).removeClass(ClassName.BG_COLOR);
61                } else {
62                    $(this).addClass(ClassName.BG_COLOR);
63                }
64
65            }
66        
67            if (scrollTop > 0) {
68                $(this).addClass(ClassName.SHORT);
69            } else {
70                $(this).removeClass(ClassName.SHORT);
71            }
72
73        });
74
75    }
76
77    var _timeout;
78    $(window)
79        .on(Event.SCROLL_DATA_API + ' ' + Event.RESIZE_DATA_API, function(event){
80            clearTimeout(_timeout);
81            _timeout = setTimeout(function(){
82                _dataApiHandler(event);
83            }, 10);
84        })
85        .trigger(Event.SCROLL_DATA_API);
86
87    $(document)
88        .on(Event.CLICK_DATA_API, Selector.BASE, function(event){
89            event.targetWrapper = this;
90        })
91        .on(Event.COLLAPSE_SHOW + ' ' + Event.COLLAPSE_HIDE, function(event){
92
93            $(event.target).closest(Selector.BASE).each(function(){
94
95                if (event.type == 'show') {
96
97                    $(Selector.BODY).addClass(ClassName.DROPDOWN_OPEN);
98
99                    $(this).addClass(ClassName.OPENED);
100
101                } else {
102
103                    $(Selector.BODY).removeClass(ClassName.DROPDOWN_OPEN);
104
105                    $(this).removeClass(ClassName.OPENED);
106
107                    $(window).trigger(Event.SCROLL_DATA_API);
108
109                    $(this).trigger(Event.COLLAPSE);
110
111                }
112
113            });
114
115        })
116        .on(Event.DROPDOWN_COLLAPSE, function(event){
117
118            $(event.relatedTarget)
119                .closest(Selector.BASE)
120                .find(Selector.TOGGLER)
121                .trigger('click');
122
123        });
124
125});