

### 概要

3カラム構成のページで各カラムの長さが違う場合に、例えば左カラムが画面外に出たら空いた部分に代替要素(ナビゲーションや back to top など)を出したいので [Intersection Observer](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API) を使って実現できないか試した記録

### できたもの

<iframe height="300" style="width: 100%;" scrolling="no" title="Intersection Observer sample" src="https://codepen.io/o-hayato/embed/YzvJYbO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/o-hayato/pen/YzvJYbO">
  Intersection Observer sample</a> by o-hayato (<a href="https://codepen.io/o-hayato">@o-hayato</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
- 左カラムが画面外に出たかどうかを監視して、代替要素を表示するようにした
- 代替要素は sticky にしてスクロールに追従するようにしてみた
- ついでに同じイベント拾ってヘッダも追従モードに切り替わるようにしてみた

Intersection Observer を使って要素が画面外に出たら代替要素を表示する



## 概要
* ClassFunction を変数に代入すると、参照が代入されるだけかと思ったが意図しない動きをする
* 代入する際に this が暗黙的に変更されるのが原因
* function を代入する際に代入する際にbindでthisを明示的に束縛してあげれば解決する

## 意図しない動きをするパターン

```ts
class SomeClass {
  param: string;
  
  constructor() {
    this.param = "test";
  }
  
  say() {
    console.log(this)
    console.log(`${this.param}`);
  }
}

  

const test = new SomeClass()
test.say()
  

const testMethod = test.say
testMethod()
```
[playground](https://www.typescriptlang.org/play?ssl=18&ssc=13&pln=1&pc=1#code/MYGwhgzhAEDKD2BbApgYXFaBvAUNf0ADmAE5iIBc0EALiQJYB2A5gNw54HDyO0kCuwGvBIAKAJTZOBAjQAW9CADpiZRNAC80AEQ1ktbexkBfDjIhgAnhKkyZ3XvBDIlIeM1HzF46XYcQnFzcPAAMAEiwvZVVyYxDxIwJTUxx-Gmg9Wk1oRmQAdzgkNAwICRxMmiULax9UniyKgFlkeXgAE2yKqqty-Rpm1raJIA) 

このまま実行すると、最終行で `console.log(this)` が呼ばれた際に this が undefined になりその次の行でエラーが出る

## 解決策

```ts
class SomeClass {
  param: string;
  
  constructor() {
    this.param = "test";
  }
  
  say() {
    console.log(this)
    console.log(`${this.param}`);
  }
}

  

const test = new SomeClass()
test.say()
  

const testMethod = test.say.bind(test)
testMethod()
```
[playground](https://www.typescriptlang.org/play?#code/MYGwhgzhAEDKD2BbApgYXFaBvAUNf0ADmAE5iIBc0EALiQJYB2A5gNw54HDyO0kCuwGvBIAKAJTZOBAjQAW9CADpiZRNAC80AEQ1ktbexkBfDjIhgAnhKkyZ3XvBDIlIeM1HzF46XYcQnFzcPAAMAEiwvZVVyYxDxIwJTUxx-Gmg9Wk1oRmQAdzgkNAwICRxMmiULax9UniyKgFlkeXgAE2yKqqslACMmNs99Gh8mlrl2iSA) 


`bind` で this を明示的に束縛すると意図した通りの動きをする

JavaScript

Intersection Observer を使って要素が画面外に出たら代替要素を表示する

[JavaScript] ClassMethod を代入すると意図しない動きをする