效果一：侧边栏固定模块
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | //侧栏跟随JS，放入header中引用或者放入其他加载的js文件中 (function() { var oDiv = document.getElementById("float"); var H = 0, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function() { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "div1 div2"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "div1"; } }; } })(); |
CSS代码：
1 2 3 4 5 6 7 8 9 10 | /*侧栏跟随*/ #box_float {float:left; position:relative; width:250px;} .div1 {width:250px;} .div2 {position:fixed; _position:absolute; top:0; z-index:999;}注：样式代码仅为参考，具体的调整，请结合自己的网站调整。 HTML代码： <div id="box_float"> <div id="float" class="div1"> 这里写你网站的代码与标签 </div> </div> |
效果二：侧边栏随窗口滚动（滑动效果）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript"> var documentHeight = 0; var topPadding = 15; $(function() { var offset = $("#sidebar").offset(); documentHeight = $(document).height(); $(window).scroll(function() { var sideBarHeight = $("#sidebar").height(); if ($(window).scrollTop() > offset.top) { var newPosition = ($(window).scrollTop() - offset.top) + topPadding; var maxPosition = documentHeight - (sideBarHeight + 368); if (newPosition > maxPosition) { newPosition = maxPosition; } $("#sidebar").stop().animate({ marginTop: newPosition }); } else { $("#sidebar").stop().animate({ marginTop: 0 }); }; }); }); </script> |
将上述javascript代码加到主题头部header.php模版中。修改其中的#sidebar为你的主题侧边选择器名称；根据不同的主题头部模版高度，适当调整其中的数字“368”。
效果三：添加侧边栏随滚动条滚动效果（无滑动）
如果你的侧边栏之前已经有了这些class标志加以区分，只要使用就可以了，不用另外加。
否则需要给侧边栏的各个模块加上一些class标志，如下图框框里面的内容：
在主题的js文件中加上如下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var rollStart = $('.Statistics'), //滚动到.Statistics区块的时候开始随动 rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块 rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块 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); } }); |
注：滚动区域的内容不能太长，不然会出现无限下拉的情况。
直接用代码一：
如果嫌引用代码还不够方便，并且想尽可能的给页面“减负”，也可以使用如下代码：
1 2 3 4 5 6 7 8 9 10 11 12 | $(function () { if ($(".fixed_side").length > 0) { var offset = $(".fixed_side").offset(); $(window).scroll(function () { var scrollTop = $(window).scrollTop(); //如果距离顶部的距离小于浏览器滚动的距离，则添加fixed属性。 if (offset.top < scrollTop) $(".fixed_side").addClass("fixed"); //否则清除fixed的css属性 else $(".fixed_side").removeClass("fixed"); }); } }); |
CSS如下：
1 | .fixed{position:fixed; top:20px; width:250px;} |
直接用代码二：
另外还有带滑动效果的侧边栏随窗口滚动jQuery代码：
修改下面的#sidebar 为你网站侧边栏选择器名称即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script> var documentHeight = 0; var topPadding = 15; $(function() { var offset = $("#sidebar").offset(); documentHeight = $(document).height(); $(window).scroll(function() { var sideBarHeight = $("#sidebar").height(); if ($(window).scrollTop() > offset.top) { var newPosition = ($(window).scrollTop() - offset.top) + topPadding; var maxPosition = documentHeight - (sideBarHeight + 300); if (newPosition > maxPosition) { newPosition = maxPosition; } $("#sidebar").stop().animate({ marginTop: newPosition }); } else { $("#sidebar").stop().animate({ marginTop: 0 }); }; }); }); </script> |
原文链接：https://xiaohost.com/1496.html，转载请注明出处。
评论0