本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)

本文作者: 苏洋

创建时间: 2012年01月27日
统计字数: 2450字
阅读时间: 5分钟阅读
本文链接: https://soulteary.com/2012/01/27/%E4%BB%BF%E6%B7%98%E5%AE%9D%E6%BB%9A%E5%8A%A8%E6%9D%A1%E5%B1%95%E7%A4%BA%E5%86%85%E5%AE%B9%E7%89%B9%E6%95%88.html

-----


# 仿淘宝滚动条展示内容特效

在[这里](http://soulteary.com/redirect?url=http%3A%2F%2Floosky.net%2F&key=530f53b6f0a90c72f14639fa1c325439)看到了类似淘宝的商品内页的滚动效果,觉得不错,就稍微修改了下.

源代码如下(问题部分稍微再说):

```js
var rollStart = $('.Statistics'),
rollOut = $('.WidgetMeta,.Statistics');
rollSet = $('.RRPosts,.TagsCloud');
rollStart.before('');
var offset = rollStart.offset(),
objWindow = $(window),
rollBox = rollStart.prev();
objWindow.scroll(function() {
	if (objWindow.scrollTop() > offset.top) {
		if (rollBox.html(null)) {
			rollSet.clone().prependTo('.rollbox')
		}
		rollOut.fadeOut();
		rollBox.show().stop().animate({
			top: 0,
			paddingTop: 10
		},
		400)
	} else {
		rollOut.fadeIn();
		rollBox.hide().stop().animate({
			top: 0
		},
		400)
	}
});
```

首先看到关键字使用有点小问题,**offset**是保留字,不建议使用其作变量, 然后呢,当wordpress登陆后,页面顶部会出现一个**wpadminbar**,都使用**top:0**不合适

最后呢,滚动条只是判断了特效开始位置,没有判断特效结束位置,虽然出处的网站看似没有这个必要,但是编程匠艺里的原则呢,就是分层写出可以继续使用的代码,那么咱就稍微修改下吧.

```js
var $rollStart = $('.widget_links'),$rollEnd = $('#page_bottom'),
$rollOut = $('.widget_links');$rollSet = $('.widget_recent_entries,.widget_recent_comments');
$rollStart.before('');

var $rollTop = $rollStart.offset(),$rollBottom = $rollEnd.offset(),
$objWin = $(window),$rollBox = $rollStart.prev(),$haslogin=0;
$objWin.scroll(function() {
	$totalHeight = $(".rollbox").height();
	if($("#wpadminbar").length >0){$haslogin=20;}

	if (($objWin.scrollTop() > $rollTop.top) && ($objWin.scrollTop() + $totalHeight < $rollBottom.top)){
		if ($rollBox.html(null)) {$rollSet.clone().prependTo('.rollbox')}
		$rollOut.fadeOut();
		$rollBox.show().stop().animate({top:$haslogin,paddingTop: 10},400)
	}
	else {
		$rollOut.fadeIn();
		$rollBox.hide().stop().animate({top:$haslogin},400)
	}
});
```

修改后的效果见本站,当页面文章内容长度大于右侧内容的时候,右侧在最后展示的内容后追加我们想要添加的内容. 

**2012.1.28更新** 

当时写完后也犯了理想主义,因为默认觉得每个元素都是存在的...

当侧边没有widget_links的时候,但是脚本依旧加载了,那么因为这个脚本的出错,顺序执行的后面的脚本就都终止了,所以要修改一下.

```js
var $rollStart = $('.widget_links'),$rollEnd = $('#page_bottom');
if($rollStart.offset()){
$rollOut = $('.widget_links');$rollSet = $('.widget_recent_entries,.widget_recent_comments');
$rollStart.before('');
var $rollTop = $rollStart.offset(),$rollBottom = $rollEnd.offset(),
$objWin = $(window),$rollBox = $rollStart.prev(),$haslogin=0;
$objWin.scroll(function() {
	$totalHeight = $(".rollbox").height();
	if($("#wpadminbar").length >0){$haslogin=20;}

	if (($objWin.scrollTop() > $rollTop.top) && ($objWin.scrollTop() + $totalHeight < $rollBottom.top)){
		if ($rollBox.html(null)) {$rollSet.clone().prependTo('.rollbox')}
		$rollOut.fadeOut();
		$rollBox.show().stop().animate({top:$haslogin,paddingTop: 10},400)
	}
	else {
		$rollOut.fadeIn();
		$rollBox.hide().stop().animate({top:$haslogin},400)
	}
});
}
```