一.需求描述

为了提升用户体验，我们经常需要在页面上显示一块内容，这块内容当屏幕向下滚动到一定位置后就展示出来，然后随着屏幕一起上下滚动，当屏幕向上滚动到一定程度，这块内容就消失，这样这块内容在就会有时候消失，有时候随着屏幕一起滚动。

二.需求分析

这个需求需要从两个方面来把握，第一，内容块随着屏幕的滚动一直展示在页面上的某个位置，第二，当屏幕向上滚动到一定位置，内容块隐藏，向下滚动到一定位置，内容块显示出来，先实现第一点，在实现第二点，这个需求就满足了。

三.实现思路

按照上面的分析，我们先来看第一点如何实现，内容块随着屏幕的滚动一直出现在页面上的某个位置，我们很容易想到css的position:fixed这个属性，可是别太高兴，IE6说你这个属性我不认识，所以在我的地盘你这样我不生效。这个时候就需要我们解决浏览器兼容性问题了，解决完这个问题我们就成功了一大半了,解决浏览器兼容性问题，使用hack啦，我们在IE6下面通过hack来使用绝对定位，伪代码如下：

1
2
3
4
5
6
7
8

.mod-scroll{ 
    position:fixed; 
    top:0; 
    left:50%;
    /** for IE6, 这个表达式可以根据实际需求具体调整 **/
	_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
	_position:absolute;
}

通过上面的css我们第一个问题就解决了，第二个问题需要监听一下滚动事件，当滚动到某个高度的时候显示内容块，当滚动到另外一个高度的时候把内容块隐藏起来。伪代码如下：

1
2
3
4
5
6
7
8
9
10
11

$(window).on('scroll',function(){
    // 260这个高度可以自己根据实际需求调整
	if($(window).scrollTop() > 260) {
	    // 内容区块带有class='xxxx'
		$('div.xxxx').show();
		// 25也可以自己调整
		$('div.xxxx').css('top',($(window).scrollTop()-25)+ 'px');
	} else {
		$('div.xxx').hide();
	}
});

这样上面这个需求就完美解决啦。