

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

# やりたいこと

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

# 発生している問題

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

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

* * *

### 該当のソースコード

html

[code]

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

css

[code]

    .imgBtn {
      width: 300px;
      height: 50px;
    }
    
    .imgBox.is_follow {
      position: fixed;
      bottom: 0;
      width: 300px;
    }
    
[/code]

JavaScript

[code]

    //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");
        });
    
[/code]


CC BY-SA 4.0
2022-06-28T01:59:31.903
89638
2022-06-29T07:57:58.053
2022-06-28T04:52:16.530
3060
53254
question
javascript html jquery scss
(this).scrollTop()の終了の仕方がわからない


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

[code]

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


CC BY-SA 4.0
2022-06-29T07:57:58.053
89665
2022-06-29T07:57:58.053
22665
89638
answer