置顶导航栏
英文 sticky navbar，通过监听页面滚动事件将导航栏设置为固定定位并置顶；涉及知识：
onscroll页面滚动事件句柄，onmousewhell鼠标滚轮滚动事件句柄。获取窗口滚动距离
window.scrollX/Y，建议使用window.pageXOffset/YOffset来代替。
加载动画
英文 loading animation，两个圆形从小变大，从深变浅，其中一个延迟动画即可；涉及知识：
window.setTimeout(function, time)，延迟定时器。动画连写参数（参数之间无逗号）：
animation(动画名 完成时间 速度曲线 延迟开始 次数 是否轮流)。使用 Compass 导入 keyframe 函数时，参数内是动画名，括号后加花括号，里面写动画顺序和内容。
滑动菜单
英文 slide menu，通过监听一级菜单的鼠标移入移除事件来将二级菜单显示或隐藏；涉及知识：
鼠标移入移出事件句柄有两组，分别是：
onmouseover/onmouseout和onmouseenter/onmouseleave；区别是：前者的子元素也会触发事件，后者的子元素不会触发事件；要分不同的情况来监听不同的事件。如何找到二级菜单，要看具体的元素结构；课程开始使用了
nextSiblling方法，来获取一级菜单内链接的下一个兄弟节点（获取上一个兄弟节点的方法是previousSibling），再通过nodeType属性不同的返回值判断节点类型（例如元素节点返回值为 1），还要判断元素的tagName属性（返回的标签名为大写字母）是否为预期的，如果需要向下获取并判断多次，可以使用while语句来循环寻找元素。自己实现的方法更接近原型，使用了
onmouseover和onmouseout事件，这样二级菜单也可以同时触发显示动作，无需额外处理；CSS 方面，使用了定位属性和过渡动画做位移，代码更简洁，并且有回退动画效果；但是带来的问题是无法使用display: none来隐藏菜单，最后使用了visibility: hidden/visible来做隐藏和显示，虽然元素并未从页面完全消失，但不会影响体验。解决问题的关键在于，马上开始着手解决问题。
滑动定位
类似锚点，但带有滑动效果，就是让滚动条在指定时间内滚动到指定位置，可以使用相应元素距离页面顶部高度来设置位置；涉及知识：
在获取元素对象的属性时，一般推荐使用
setAttribute()和getAttribute()方法，直接使用点运算符，可能会返回经过浏览器处理的结果，例如<a>标签中href的属性值。使用
document.querySelector()方法可以返回文档中匹配括号中指定 CSS 选择器的第一个元素，如果要想返回匹配的所有元素，可以使用document.querySelectorAll()方法。点击
<a>标签时，要阻止它的默认事件，可以使用href="javascript:"的方法，但是如果href属性另有他用怎么办？那就使用时间对象的阻止默认事件方法ev.preventDefault()。使用
offsetTop属性可以获取元素相对于它的offsetParent元素的顶部的距离（不包含边框），这是一个只读属性，返回值是数字类型的像素数；由于无法直接获取到元素相对页面最顶端的距离，所以只能用这个属性结合offsetParent属性，一直获取到<body>标签以下的所有元素的offsetTop之和；与之相配套的属性是offsetLeft属性，代表相对左上角的距离。使用
window.scrollTo()方法可以使页面滚动到指定位置，有两个必需参数，第一个是 x 坐标，第二个是 y 坐标。