正常情况下,我们ZblogPHP网站的主体部分和侧边栏很难实现高度的统一,即便是您好不容易调整到一样高度了,换到另一个浏览器也会出现参差不齐的情况。看到很多站长采用侧边栏跟随的方法,实现了侧栏随着滚动条的滚动,固定浮动的效果。这种方法不仅可以让您的网页变得美观,还能增加指定模块、文章、广告内容的点击率,非常适合ZblogPHP站长使用。
网页主体结构样式:
<div class="wrapper"> <div class="content"> ... </div> <div class="cebianlan"> ... </div> </div>
这种结构是所用到JS代码的要求,其中cebianlan是您想要智能滑动的元素(名称可以修改),wrapper可以理解为框架结构的CSS选择器(不可修改),content则是侧栏以上内容的CSS选择器(不可修改),content需要在wrapper的下一级。
注:若您的ZblogPHP网站主体结构与此不同,需要自己调整修改,操作之前一定要备份,防止失误。
在需要智能滑动的页面所调用的JS中,添加以下代码,也可以直接新建JS文件:
(function($){$.fn.theiaStickySidebar=function(options){var defaults={'containerSelector':'','additionalMarginTop':0,'additionalMarginBottom':0,'updateSidebarHeight':true,'minWidth':0,'disableOnResponsiveLayouts':true,'sidebarBehavior':'modern'};options=$.extend(defaults,options);options.additionalMarginTop=parseInt(options.additionalMarginTop)||0;options.additionalMarginBottom=parseInt(options.additionalMarginBottom)||0;tryInitOrHookIntoEvents(options,this);function tryInitOrHookIntoEvents(options,$that){var success=tryInit(options,$that);if(!success){console.log('TST: Body width smaller than options.minWidth. Init is delayed.');$(document).scroll(function(options,$that){return function(evt){var success=tryInit(options,$that);if(success){$(this).unbind(evt)}}}(options,$that));$(window).resize(function(options,$that){return function(evt){var success=tryInit(options,$that);if(success){$(this).unbind(evt)}}}(options,$that))}}function tryInit(options,$that){if(options.initialized===true){return true}if($('body').width()<options.minWidth){return false}init(options,$that);return true}function init(options,$that){options.initialized=true;$('head').append($('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>'));$that.each(function(){var o={};o.sidebar=$(this);o.options=options||{};o.container=$(o.options.containerSelector);if(o.container.length==0){o.container=o.sidebar.parent()}o.sidebar.parents().css('-webkit-transform','none');o.sidebar.css({'position':'relative','overflow':'visible','-webkit-box-sizing':'border-box','-moz-box-sizing':'border-box','box-sizing':'border-box'});o.stickySidebar=o.sidebar.find('.theiaStickySidebar');if(o.stickySidebar.length==0){var javaScriptMIMETypes=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;o.sidebar.find('script').filter(function(index,script){return script.type.length===0||script.type.match(javaScriptMIMETypes)}).remove();o.stickySidebar=$('<div>').addClass('theiaStickySidebar').append(o.sidebar.children());o.sidebar.append(o.stickySidebar)}o.marginTop=parseInt(o.sidebar.css('margin-top'));o.marginBottom=parseInt(o.sidebar.css('margin-bottom'));o.paddingTop=parseInt(o.sidebar.css('padding-top'));o.paddingBottom=parseInt(o.sidebar.css('padding-bottom'));var collapsedTopHeight=o.stickySidebar.offset().top;var collapsedBottomHeight=o.stickySidebar.outerHeight();o.stickySidebar.css('padding-top',0);o.stickySidebar.css('padding-bottom',0);collapsedTopHeight-=o.stickySidebar.offset().top;collapsedBottomHeight=o.stickySidebar.outerHeight()-collapsedBottomHeight-collapsedTopHeight;if(collapsedTopHeight==0){o.stickySidebar.css('padding-top',0);o.stickySidebarPaddingTop=0}else{o.stickySidebarPaddingTop=0}if(collapsedBottomHeight==0){o.stickySidebar.css('padding-bottom',0);o.stickySidebarPaddingBottom=0}else{o.stickySidebarPaddingBottom=0}o.previousScrollTop=null;o.fixedScrollTop=0;resetSidebar();o.onScroll=function(o){if(!o.stickySidebar.is(":visible")){return}if($('body').width()<o.options.minWidth){resetSidebar();return}if(o.options.disableOnResponsiveLayouts){var sidebarWidth=o.sidebar.outerWidth(o.sidebar.css('float')=='none');if(sidebarWidth+50>o.container.width()){resetSidebar();return}}var scrollTop=$(document).scrollTop();var position='static';if(scrollTop>=o.container.offset().top+(o.paddingTop+o.marginTop-o.options.additionalMarginTop)){var offsetTop=o.paddingTop+o.marginTop+options.additionalMarginTop;var offsetBottom=o.paddingBottom+o.marginBottom+options.additionalMarginBottom;var containerTop=o.container.offset().top;var containerBottom=o.container.offset().top+getClearedHeight(o.container);var windowOffsetTop=0+options.additionalMarginTop;var windowOffsetBottom;var sidebarSmallerThanWindow=(o.stickySidebar.outerHeight()+offsetTop+offsetBottom)<$(window).height();if(sidebarSmallerThanWindow){windowOffsetBottom=windowOffsetTop+o.stickySidebar.outerHeight()}else{windowOffsetBottom=$(window).height()-o.marginBottom-o.paddingBottom-options.additionalMarginBottom}var staticLimitTop=containerTop-scrollTop+o.paddingTop+o.marginTop;var staticLimitBottom=containerBottom-scrollTop-o.paddingBottom-o.marginBottom;var top=o.stickySidebar.offset().top-scrollTop;var scrollTopDiff=o.previousScrollTop-scrollTop;if(o.stickySidebar.css('position')=='fixed'){if(o.options.sidebarBehavior=='modern'){top+=scrollTopDiff}}if(o.options.sidebarBehavior=='stick-to-top'){top=options.additionalMarginTop}if(o.options.sidebarBehavior=='stick-to-bottom'){top=windowOffsetBottom-o.stickySidebar.outerHeight()}if(scrollTopDiff>0){top=Math.min(top,windowOffsetTop)}else{top=Math.max(top,windowOffsetBottom-o.stickySidebar.outerHeight())}top=Math.max(top,staticLimitTop);top=Math.min(top,staticLimitBottom-o.stickySidebar.outerHeight());var sidebarSameHeightAsContainer=o.container.height()==o.stickySidebar.outerHeight();if(!sidebarSameHeightAsContainer&&top==windowOffsetTop){position='fixed'}else if(!sidebarSameHeightAsContainer&&top==windowOffsetBottom-o.stickySidebar.outerHeight()){position='fixed'}else if(scrollTop+top-o.sidebar.offset().top-o.paddingTop<=options.additionalMarginTop){position='static'}else{position='absolute'}}if(position=='fixed'){o.stickySidebar.css({'position':'fixed','width':o.sidebar.width(),'top':top,'left':o.sidebar.offset().left+parseInt(o.sidebar.css('padding-left'))})}else if(position=='absolute'){var css={};if(o.stickySidebar.css('position')!='absolute'){css.position='absolute';css.top=scrollTop+top-o.sidebar.offset().top-o.stickySidebarPaddingTop-o.stickySidebarPaddingBottom}css.width=o.sidebar.width();css.left='';o.stickySidebar.css(css)}else if(position=='static'){resetSidebar()}if(position!='static'){if(o.options.updateSidebarHeight==true){o.sidebar.css({'min-height':o.stickySidebar.outerHeight()+o.stickySidebar.offset().top-o.sidebar.offset().top+o.paddingBottom})}}o.previousScrollTop=scrollTop};o.onScroll(o);$(document).scroll(function(o){return function(){o.onScroll(o)}}(o));$(window).resize(function(o){return function(){o.stickySidebar.css({'position':'static'});o.onScroll(o)}}(o));function resetSidebar(){o.fixedScrollTop=0;o.sidebar.css({'min-height':'0px'});o.stickySidebar.css({'position':'static','width':''})}function getClearedHeight(e){var height=e.height();e.children().each(function(){height=Math.max(height,$(this).height())});return height}})}}})(jQuery); $(document).ready(function() { $('.cebianlan').theiaStickySidebar({ additionalMarginTop: 30, additionalMarginBottom:30 }); });
引入JS代码:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="theia-sticky-sidebar.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.cebianlan').theiaStickySidebar({ // Settings additionalMarginTop: 30 }); }); </script>
theia-sticky-sidebar.js是您刚刚新建的JS文件名称,若您是直接添加到页面调用的JS中,则无需重复引入;cebianlan是想要滑动的智能元素对应的父系选择器,需要与上方的html网站主体结构相对应;数字“30”是侧边栏的顶部margin值,单位像素,可修改。
至此,已经大功告成了。
注:若全部按照流程操作,仍然无法实现侧边栏跟随固定浮动的效果,首先检查Html结构是否正确,其次检查引入代码的顺序是否一样,以及所引入的JS文件是否真实存在。