0

普段、簡単なjQueryなどは使うのですが、複雑になるといつもつまづいてしまいます。
どなたか下記の動作を実現するにはどう作ればいいのか方法を教えていただきだいです。

やりたいこと

  1. ある高さまでスクロールしたら画像に追従用のclassを追加
  2. 上にスクロールして画像が元からあった場所まで戻ってきたら追従用のclassを外す
  3. 画像が追従中、画像をクリックしたら追加したclassを外す(追従中を終了させたい)

発生している問題

上記3番目の「画像が追従中、画像をクリックしたら追加したclassを外す」までできましたが、最後の(追従を終了させたい)ができません。
スクロールを検知する監視が終了できず、すぐまた追従用のclassが追加されてしまいます。

(this).scrollTop() の終了できないのが、やりたいことができない原因だと思うのですが、
クリックしたら追従終了の箇所にどう (this).scrollTop() の終了を組みこんだらよいのかわかりません。


該当のソースコード

html

<body>
<div>
 <p class="imgBox"><a href="#" class="imgBtn"><img src="" alt=""></a></p>
</div>
<body>

css

.imgBtn {
  width: 300px;
  height: 50px;
}

.imgBox.is_follow {
  position: fixed;
  bottom: 0;
  width: 300px;
}

JavaScript

//160以上になったら追従・160以下になったら追従終了
    $(window).on("scroll", function() {
        if ($(this).scrollTop() > 160) {
            $(".imgBtn").addClass("is_follow");
        } else {
            $(".imgBtn").removeClass("is_follow");
        }
    });

//クリックしたら追従終了
    $(".imgBtn").click(function(){
        $(".imgBtn").removeClass("is_follow");
    });
0

1 件の回答 1

0

「追従中を終了したい」が
「追従監視をとめたい」ということであり、scrollイベント監視をやめてしまうという意味であれば.off()|jQueryを利用すればよいと思います。

//クリックしたら追従終了&スクロールイベントを削除
$(".imgBtn").click(function(){
    $(".imgBtn").removeClass("is_follow");
    $(window).off("scroll");
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。