Boliquan

当某篇文章比较长时，我们阅读时屏幕滚动到下面的时候，可能已经看不到侧边栏里面的那些模块了。所以我们想实现一种效果，就是当屏幕滚动到侧边栏结束时，出现我们想显示的一些小模块，并且这些小模块固定显示在侧边栏。我在本地电脑已经实现，但是没有应用到网站中，下面介绍具体实现方法：

假如主题的侧边栏结构如下：

<div class="sidebar">
	<ul>
		<li>
			<h3>小模块1</h3>
			......
		</li>
		<li>
			<h3>小模块2</h3>
			......
		</li>
		<li>
			<h3>小模块3</h3>
			......
		</li>
	</ul><div class="clear"></div>
</div><!--sidebar_END-->

我们为想要实现侧栏滑动的前两个小模块分别加上：

class="roll-one" 与 class="roll-two"

我们在开始滑动的地方，也就是侧边栏结束的地方加上：

<div id="rollstart"></div>

加好以上代码后，侧边栏结构如下：

<div class="sidebar">
	<ul>
		<li class="roll-one">
			<h3>小模块1</h3>
			......
		</li>
		<li class="roll-two">
			<h3>小模块2</h3>
			......
		</li>
		<li>
			<h3>小模块3</h3>
			......
		</li>
	</ul><div class="clear"></div>
	<div id="rollstart"></div>
</div><!--sidebar_END-->

最后在侧栏结束处加上如下jQuery代码即可：（需要先加载jQuery库）

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
    if (!isie6()) {
        var rollStart = $('#rollstart'),
        rollSet = $('.roll-one,.roll-two'); //想要滑动的小模块容器
        rollStart.before('<ul class="rollbox" style="position:fixed;width:235px;"></ul>'); //包裹所有想要滑动的小模块，宽度为侧边栏宽度
        var offset = rollStart.offset(),
        objWindow = $(window),
        rollBox = rollStart.prev();
        if (objWindow.width() > 960) {
            objWindow.scroll(function() {
                if (objWindow.scrollTop() > offset.top) {
                    if (rollBox.html(null)) {
                        rollSet.clone().prependTo('.rollbox')
                    }
                    rollBox.show().stop().animate({
                        top: 0,
                        paddingTop: 15
                    },
                    400)
                } else {
                    rollBox.hide().stop().animate({
                        top: 0
                    },
                    400)
                }
            })
        }
    }
    function isie6() {
        if ($.browser.msie) {
            if ($.browser.version == "6.0") return true;
        }
        return false;
    }
});
//]]>
</script>