以下のようなナビゲーションがあります。
<nav>
　<ul>
　　<li><a href="#">会社概要</a></li>
　　<li><a href="#">製品紹介</a></li>
　　<li><a href="#">お問い合わせ</a></li>
　</ul>
</nav>
これを使って、次の要件を満たしたものを作りたいです。

1、画面がスクロールしていないときはそのままメニュー表示
2、スクロールされたら、画面上部に固定のメニューボタン（画像）を表示
3、メニューボタンをクリックするとツールチップのようにリンクが出る
4、リンククリックでリンク箇所へ遷移し、該当箇所へ遷移したらツールチップは非表示
5、その他、ツールチップが出ている状態でそれ以外の場所をクリックすると、ツールチップは消える

クラスの切り替えで、1と2まではjQueryでなんとかやってみたのですが、それ以降で悩んで止まってます。
参考になりそうなサイトでもいいので、アドバイスがほしいです。