如何透過 jquery 或是 CSS 達成收合效果?

大家好,我又遇到難題想來求救了,菜鳥就是問題一堆真的抱歉!

事情是這樣的,我做了一個版面當滑鼠往下滾動時黃色區塊必須跑出來!
但是當滑鼠 hover 到黃色區塊時,原本的藍色區塊需要從原本的位置慢慢出來到原本的位置,等到滑鼠移開時藍色區塊又可以緩慢地收合上去!

但我的思路整個打結了,就是想不出來該如何實現,因此上來討個救兵,謝謝大家觀看我的問題!

JS 第 34行是我的嘗試
https://codepen.io/hong-wei/pen/mdWGbEm?editors=1010

1、再写一个蓝色区块代码,样式和之前的蓝色区块相同。

2、把新的蓝色区块的定位方式换成和黄色区块一样的fixed定位。

3、隐藏新写的蓝色区块。

4、鼠标移入黄色区块 时,黄色区块消失,新的蓝色区块显示。

5、鼠标移除新的蓝色区块时,新蓝色区块消失,黄色区块显示