質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1679閲覧

scrollify.jsのページャーを1ページ目だけ消したいのですが(別バージョン)

futon

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/03 02:15

編集2022/01/12 10:55

先日こちらで「scrollify.jsのページャーを1ページ目だけ消したいのですが」と質問させていただいた者です。

https://teratail.com/questions/169717

一旦は解決したのですが、作り直しを行ったため、再度同じ質問をさせていただくことをお許しください。

前回のページャーのJavascriptは別の参考サイトから引用させていただいたものでしたが、
今回は本家のデモサイトに使用されていたJavascriptとCSSを使用し、正常に動作が確認出来ました。

本題の質問ですが、以下の通りです。


jQueryのscrollifyを導入しています。

scrollify デモサイト

ページャーを以下のように設定しているとすると、4ページあるうち、1ページ目のページャーだけ非表示にするにはどのように記述したらよいでしょうか。
(通常時の動作確認は完了しています)

ボタン等で取得する形ではなく、スクロールする前の最初のページだけページャーが見えない感じです。

【↓ Javascript ↓】

$(function() { $.scrollify({ section:".panel", scrollbars:false, before:function(i,panels) { var ref = panels[i].attr("data-section-name"); $(".pagination .active").removeClass("active"); $(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active"); }, afterRender:function() { var pagination = "<ul class=\"pagination\">"; var activeClass = ""; $(".panel").each(function(i) { activeClass = ""; if(i===0) { activeClass = "active"; } pagination += "<li><a class=\"" + activeClass + "\" href=\"#" + $(this).attr("data-section-name") + "\"><span class=\"hover-text\">" + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "</span></a></li>"; }); pagination += "</ul>"; $(".home").append(pagination); $(".pagination a").on("click",$.scrollify.move); } }); });

【↓ HTML ↓】

<section class="panel home" data-section-name="home"> <div class="inner"> <div class="vertical-center"> <h1>Pagination</h1> <p>Simple navigation for Scrollify sections.</p> </div> </div> </section> <section class="panel panel1" data-section-name="second"> <div class="inner"> <div class="vertical-center"> <h2>afterRender()</h2> <p>Use Scrollify's <span class="code">afterRender()</span> callback to build your pagination links.</p> </div> </div> </section> <section class="panel panel2" data-section-name="third"> <div class="inner"> <div class="vertical-center"> <h2>before()</h2> <p>Apply an active class with the <span class="code">before()</span> callback.</p> </div> </div> </section> <section class="panel panel3" data-section-name="fourth"> <div class="inner"> <div class="vertical-center"> <h2>move()</h2> <p>Call <span class="code">$.scrollify.move()</span> in a click event to navigate to sections.</p> </div> </div> </section>

【↓ CSS ↓】

.vertical-center { text-align:center; width:100%; position: absolute; top: 47%; transform: translateY(-47%); } .vertical-center p { margin-top:23px; } .inner { position: relative; height:100%; width:80%; margin:0 auto; } .home { background:#6dcb94; background:hsl(158,58%,52%); } .panel1 { background:#ec8200; background:hsl(28,100%,52%); } .panel2 { background:#64a0d4; background:hsl(200,60%,55%); } .panel3 { background:#e14456; background:hsl(350,92%,59%); } .code { background:rgba(0,0,0,0.2); } .pagination { position:fixed; right:20px; top: 50%; transform: translateY(-50%); font-size:1.4em; z-index: 10; } .pagination a { display:block; height:20px; margin-bottom:5px; color:white; position:relative; padding:4px; } .pagination a.active:after { box-shadow:inset 0 0 0 5px; } .pagination a .hover-text { position:absolute; right:15px; top:7px; opacity:0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; padding-right: 15px; } .pagination a:hover .hover-text { opacity: 1; } .pagination a:after { -webkit-transition:box-shadow 0.5s ease; transition:box-shadow 0.5s ease; width:10px; height:10px; display: block; border:1px solid; border-radius:50%; content:''; position: absolute; margin:auto; top:0; right:4px; bottom:0; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問