回答編集履歴

2

修正

2019/02/28 05:39

投稿

m.ts10806
m.ts10806

スコア80852

test CHANGED
@@ -242,4 +242,4 @@
242
242
 
243
243
  ```
244
244
 
245
- ![イメージ説明](d00e11e97a36a1f6ef3a51888df19d50.png)
245
+ ![イメージ説明](51dca3690c879e3bb9716f5cdf988158.png)

1

修正

2019/02/28 05:39

投稿

m.ts10806
m.ts10806

スコア80852

test CHANGED
@@ -182,7 +182,7 @@
182
182
 
183
183
  ```
184
184
 
185
- ![イメージ説明](a514b8969aaa5a42b7c946afd1ffc282.png)
185
+ ![イメージ説明](c754e77031aed7534dd6265f5124eb9a.png)
186
186
 
187
187
  hover時と同じところに挿入できたことを確認。
188
188
 
@@ -191,3 +191,55 @@
191
191
  -----
192
192
 
193
193
  私のほうは本当に最低限の構成しかないので最後の画像にあるように文字色が白ですが、このあたりは調整かと思います。
194
+
195
+
196
+
197
+ -----
198
+
199
+
200
+
201
+ 蛇足:
202
+
203
+ optionsも含めていろいろ調整
204
+
205
+ ```js
206
+
207
+ $(function() {
208
+
209
+ const pagepiling_setting = {
210
+
211
+ menu: '#menu',
212
+
213
+ anchors: ['page1', 'page2', 'page3', 'page4'],
214
+
215
+ navigation: {
216
+
217
+ 'position': 'right',
218
+
219
+ 'tooltips': ['section1', 'section2', 'section3', 'section4']
220
+
221
+ },
222
+
223
+ scrollingSpeed: 1000,
224
+
225
+ sectionSelector: '.contents'
226
+
227
+ };
228
+
229
+ $('#pagepiling').pagepiling(pagepiling_setting);
230
+
231
+
232
+
233
+ $('#pp-nav li').each(function(index, element){
234
+
235
+ var tooltip = $(this).data('tooltip');
236
+
237
+ $('<div class="pp-tooltip '+pagepiling_setting.navigation.position+'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
238
+
239
+ })
240
+
241
+ });
242
+
243
+ ```
244
+
245
+ ![イメージ説明](d00e11e97a36a1f6ef3a51888df19d50.png)