实现滚动条监听

本文主要利用原生的javascript实现滚动条事件的监听，主要涉及的知识：
（1）利用React组件渲染一个UI页面
（2）实现锚点链接
（3）实现滚动条onscroll事件
其中,利用React渲染的UI延续了React状态提升中的内容，只是在这个基础上做了一点相应的修改。最终得到的DOM页面的结构如下：

（2）锚点链接：锚点是页面中的一种超链接，主要体现为：通过点击命名锚点，最终指向页面中的某一部分，也就是说，下面我们将利用本文的实例解释锚点链接：

在上一个图中，如果我们点击右侧悬浮的导航栏中对应的体育，则左侧就指向相应的内容区域，同理，如果点击右侧的新闻，页面也将指向相应的内容区域。
在本次实例中，我们使用id做锚点链接，也就是说，右侧四个悬浮导航菜单中的href属性中#后的值要与左侧内容区域的id属性名相同，具体如下：

其中，用黑色粗实线框住的两个区域就是实线锚点链接的体现。
（3）实现滚动条onscroll事件
DOM的层次结构中，上图中的左侧被黑色粗线框住的三个div属于同一类，类名均为class=itemarea
首先，我们利用document.documentElement.scrollTop获取当前滚动条的坐标位置，由于所有浏览器都支持document.documentElement.，所以在本文中我们就没有在对是否是要使用document.documentElement.还是document.body做判断，我们还需要取到id=menu下的a标签以及id=itemdetail节点下的类名为class=itemarea的节点，具体实现如下：

window.onscroll = function(){
    //获取当前滚动条的位置
    var top = document.documentElement.scrollTop;
    //获取id为menu节点下的a标签
    var menus=document.getElementById("menu").getElementsByTagName("a");
	//取得id为itemdetail下类名为itemarea的节点
	var itemarea = document.getElementById("itemdetail").getElementsByClassName("itemarea");
	var currentId = "";
	//存放当前位置的id
	}

然后，对于左侧的每一个类名为class=“itemarea的节点offsetTop属性（主要是判断当前元素顶部相对于上层控件的偏移量）如果当前滚动条的坐标位置大于offsetTop得到的值，在把当前节点的id存下来。

for (var i =0; iitemTop-50){
				currentId = itemarea[i].id;
			}else{
				break;
			}
		}

如果此时的currentId已经有一个非空的值，我们就拿着这个值去逐一的与id=menu下的a标签中href属性作比较，如果currentId与href属性中的字符串是相等的，就说明，当前滚动条的位置应该与匹配到的a标签对应，为：

if(currentId){
						//给正确的menu下的a元素class赋值
			for (var i=0; i

此时，在页面上滚动滚动条得到的效果如下：



此时左侧的内容区域与右侧高亮显示的标签对应关系是正确的。