随页面滚动改变定位的tab菜单

实现效果及完整代码：https://lucyzlu.github.io/Web/toTop.html

1.导航菜单功能

在页面滚动时导航菜单始终显示在视口内，以便用户在浏览时可以随时点击导航菜单链接到别的页面查看样例。
我觉得这里之所以要特别把导航菜单做成这样，是因为这个页面是基本样例的展示，文档本身高度比较大，且用户一般不会从头到尾仔细看文档，很可能中途就要跳转到其他页面，因此让用户随时可以看到菜单而不是要返回顶部以后查看菜单就可以提高易用性。

2.基本思想：

• 菜单初始时是在文档中相对于容器顶部绝对定位；
• 在页面往下滚动到顶部区域不再出现在视口中时，tab菜单变为相对于视口固定定位，以便用户随时通过菜单进行导航；
• 当页面滚动到底部链接区域的上边界距离视口上部的距离小于了菜单的高度时，为了不让固定视口定位的菜单遮挡底部链接区域（这里涉及不含z-index的堆叠顺序https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index，即虽然底部区域的代码在html文档中位于菜单代码的后面，但是因为底部区域是普通流，而菜单是有定位的，因此菜单距离观察者更近，视觉上就是遮挡了底部区域，这不是我们想要的效果），将菜单设置为相对于容器底部绝对定位。

3.代码实现

1. 使用JS改变position属性实现：

菜单改变定位的判定条件有三个：
1.1默认情况下是相对于content绝对定位于顶部，这里要求content的position属性要设置成非static，以方便菜单相对于content绝对定位于顶部0处；

            #conten