在这里看到了类似淘宝的商品内页的滚动效果,觉得不错,就稍微修改了下.
源代码如下(问题部分稍微再说):
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) } }); } |