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

在这里看到了类似淘宝的商品内页的滚动效果,觉得不错,就稍微修改了下.

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

var rollStart = $('.Statistics'),
rollOut = $('.WidgetMeta,.Statistics');
rollSet = $('.RRPosts,.TagsCloud');
rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');
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不合适
最后呢,滚动条只是判断了特效开始位置,没有判断特效结束位置,虽然出处的网站看似没有这个必要,但是编程匠艺里的原则呢,就是分层写出可以继续使用的代码,那么咱就稍微修改下吧.

var $rollStart = $('.widget_links'),$rollEnd = $('#page_bottom'),
$rollOut = $('.widget_links');$rollSet = $('.widget_recent_entries,.widget_recent_comments');
$rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');
 
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的时候,但是脚本依旧加载了,那么因为这个脚本的出错,顺序执行的后面的脚本就都终止了,所以要修改一下.

var $rollStart = $('.widget_links'),$rollEnd = $('#page_bottom');
if($rollStart.offset()){
$rollOut = $('.widget_links');$rollSet = $('.widget_recent_entries,.widget_recent_comments');
$rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');
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)
	}
});
}


	使用你的社交网站账号连接登陆本站注意: 使用微博连接登陆后，请尽快到后台修改您的邮箱地址，以便接收在本站的一些通知及回复。

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

我要留言