LoginSignup
web_tomoya
@web_tomoya

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

fullPage.jsのカスタマイズについて

解決したいこと

固定イメージ(ロゴ)を任意のページで画像を切り替えたいです。

現在fullPage.jsを使用してページを制作しています。
画面左上にfixedでロゴを表示しています。
任意のページにスクロールしたら画面を切り替えたいと思っています。
fullPage.jsでこのようなことは可能でしょうか?
解決方法を教えて下さい。

発生している問題・エラー

ページごと表示が切り替わらない。

該当するソースコード

自分で試したこと

scrollTop() メソッドを使用して情報を取得しようとしましたが、fullPage.jsに
このメソッドは使えずどうしていいかわかりません。

0

1Answer

afterLoadなどで現在のインデックスによってロゴを変える処理を組み込んで実装できないでしょうか?

こちらのサイトのサンプルを流用してafterLoadを組み込んでみました。
ページによってconsoleにログが出力されることが確認できました。

See the Pen fullpage01 by yotty (@yotty) on CodePen.

0

Comments

  1. @web_tomoya

    Questioner
    回答ありがとうございます!
    早速試させていただきまして、任意のページにきたらlogに出力するところまでは行ったのですが、その後どんなコードで画像を変更させるかわかりません。
    addClassとかでクラスを追加して画像を切り替えるかんじですかね?
    そのコードの書き方がわからないので、教えていただけたら嬉しいです。
  2. 画像はimgタグを利用して表示していますでしょうか?

    「imgタグ src 変更」などで検索すれば、参考になる情報がいろいろ出てくると思います。
  3. @web_tomoya

    Questioner
    お返事ありがとうございます。
    background-imageの切り替えでなんとか実装できました。
    お力添えいただき本当に助かりました!ありがとうございました!
    imgタグのsrc変更もググって調べます!
  4. 解決したようでよかったです!

Your answer might help someone💌