jquery.inview.jsでグローバルナビゲーションを実装したい

WordPressでjquery.inview.jsを使用して、グローバルナビゲーションを動かしたいのですが、わからないのでご回答をお願いします。

javascript
1jQuery(".openbtn1").click(function ($) {
2  $(this).toggleClass('active');
3    $("#g-nav").toggleClass('panelactive');
4    $(".circle-bg").toggleClass('circleactive');
5});
6
7jQuery("#g-nav a").click(function ($) {
8    $(".openbtn1").removeClass('active');
9    $("#g-nav").removeClass('panelactive');
10    $(".circle-bg").removeClass('circleactive');
11});

HTML
1<div class="openbtn1"><span></span><span></span><span></span></div>
2<nav id="g-nav">
3<div id="g-nav-list">
4<ul>
5<li><a href="#">Top</a></li>  
6<li><a href="#">About</a></li>  
7<li><a href="#">Service</a></li>  
8<li><a href="#">Contact</a></li>  
9</ul>
10</div>
11</nav>
12<div class="circle-bg"></div>

css
1#g-nav.panelactive{
2    position:fixed;
3    z-index: 999;
4  top: 0;
5  width:100%;
6    height: 100vh;
7}
8
9.circle-bg{
10    position: fixed;
11  z-index:3;
12    width: 100px;
13    height: 100px;
14    border-radius: 50%;
15    background: #999;
16  transform: scale(0);
17  right:-50px;
18    top:-50px;
19    transition: all .6s;
20}
21
22.circle-bg.circleactive{
23  transform: scale(50);
24}
25
26#g-nav-list{
27    display: none;
28    position: fixed;
29    z-index: 999; 
30    width: 100%;
31    height: 100vh;
32    overflow: auto;
33    -webkit-overflow-scrolling: touch;
34}
35
36#g-nav.panelactive #g-nav-list{
37     display: block; 
38}
39
40#g-nav ul {
41  opacity: 0;
42    position: absolute;
43    z-index: 999;
44    top:50%;
45    left:50%;
46    transform: translate(-50%,-50%);
47}
48
49#g-nav.panelactive ul {
50    opacity:1;
51}
52
53#g-nav.panelactive ul li{
54animation-name:gnaviAnime;
55animation-duration:1s;
56animation-delay:.2s;
57animation-fill-mode:forwards;
58opacity:0;
59}
60@keyframes gnaviAnime{
610% {
62opacity: 0;
63}
64100% {
65opacity: 1;
66}
67}
68
69#g-nav li{
70  text-align: center; 
71  list-style: none;
72}
73
74#g-nav li a{
75  color: #333;
76  text-decoration: none;
77  padding:10px;
78  display: block;
79  text-transform: uppercase;
80  letter-spacing: 0.1em;
81  font-weight: bold;
82}
83
84.openbtn1{
85  position:fixed;
86  top:10px;
87  right: 10px;
88  z-index: 9999;
89  cursor: pointer;
90    width: 50px;
91    height:50px;
92}
93  
94.openbtn1 span{
95    display: inline-block;
96    transition: all .4s;
97    position: absolute;
98    left: 14px;
99    height: 3px;
100    border-radius: 2px;
101  background-color: #666;
102    width: 45%;
103  }
104
105.openbtn1 span:nth-of-type(1) {
106  top:15px; 
107}
108
109.openbtn1 span:nth-of-type(2) {
110  top:23px;
111}
112
113.openbtn1 span:nth-of-type(3) {
114  top:31px;
115}
116
117.openbtn1.active span:nth-of-type(1) {
118    top: 18px;
119    left: 18px;
120    transform: translateY(6px) rotate(-45deg);
121    width: 30%;
122}
123
124.openbtn1.active span:nth-of-type(2) {
125  opacity: 0;
126}
127
128.openbtn1.active span:nth-of-type(3){
129    top: 30px;
130    left: 18px;
131    transform: translateY(-6px) rotate(45deg);
132    width: 30%;
133}

行動規範の内容に同意します

回答1件

自己解決

他のサイトで調べ色々試行錯誤したところ下記のように記述したら、動きました。

javascript
1jQuery(function ($) {
2
3$(".openbtn1").click(function () {
4  $(this).toggleClass('active');
5    $("#g-nav").toggleClass('panelactive');
6    $(".circle-bg").toggleClass('circleactive');
7});
8
9$("#g-nav a").click(function () {
10    $(".openbtn1").removeClass('active');
11    $("#g-nav").removeClass('panelactive');
12    $(".circle-bg").removeClass('circleactive');
13});
14});
15