【第三十八篇】如何利用Sticky的JS脚本实现让网页侧栏跟随屏幕滚动? - 牛犊网
博客专栏 | RSS订阅 | 微信号 | 大鱼号 | 腾讯号 | 百家号 | 新浪号 | 一点号 | 头条号 | 搜狐号 | 网易号 牛犊网 - 创业者和职场人的启蒙导师
你的位置:首页 » 博客专栏 » 正文

【第三十八篇】如何利用Sticky的JS脚本实现让网页侧栏跟随屏幕滚动?

琚叶青 • 2017年7月28日 • 次阅读 • 0个评论 标签 : 网页优化 网络运营

如何利用Sticky的JS脚本实现让网页侧栏跟随屏幕滚动?

很多站长应该都使用过卢松松推荐的那段【侧栏跟随滚动条】的代码,对侧栏进行过代码修改,让其实现跟随屏幕滚动而滚动,提升侧栏广告位的曝光度。但是细心的站长应该发现,这段代码有个bug,就是当屏幕高度低于滚动模块的时候,底部的内容就会被遮挡,体验相当的不友好。


例如下图的IT之家的侧栏:

如何利用Sticky的JS脚本实现让网页侧栏跟随屏幕滚动?


那么,有什么更好的办法实现不重叠,又上下滑动的很舒爽呢? 可以看看牛犊网的侧栏效果又或者糗事百科的侧栏,不仅仅跟随滚动触碰底部不遮挡,而且还不与其他标签重叠,更屌炸天的效果就是侧栏并没有被切开分离,而是一整块的上下滑动,也就是触碰到底部之后,你再向上滚动侧栏会暂时停留,让用户浏览内容至顶部后,才跟随滚动条置顶向上一同滑动。这样的展现方式有没有觉得很赞? 想不想来它个32个赞???


我就不在这里卖关子了,直接开始修改教程,让你的网页侧栏也可以屌炸天,让其他没有该功能的站长在你面前叩拜。


首先,你的页面需要引用jQuery基础框架,现在市面上的建站系统基本都已经引用了,当然你是前端高手,就忽略吧。


然后,在你页面引用的脚本中添加滑动效果实现的代码(如下),或者下载JS脚本文件(StickySidebar.7z)解压上传至自己服务器再引用。

//侧栏跟随
(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("TSS: 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.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",1);o.stickySidebar.css("padding-bottom",1);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=1}if(collapsedBottomHeight==0){o.stickySidebar.css("padding-bottom",0);o.stickySidebarPaddingBottom=0}else{o.stickySidebarPaddingBottom=1}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.sidebar.offset().top+(o.paddingTop-o.options.additionalMarginTop)){var offsetTop=o.paddingTop+options.additionalMarginTop;var offsetBottom=o.paddingBottom+o.marginBottom+options.additionalMarginBottom;var containerTop=o.sidebar.offset().top;var containerBottom=o.sidebar.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;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"){var scrollLeft=$(document).scrollLeft();o.stickySidebar.css({"position":"fixed","width":getWidthForObject(o.stickySidebar)+"px","transform":"translateY("+top+"px)","left":(o.sidebar.offset().left+parseInt(o.sidebar.css("padding-left"))-scrollLeft)+"px","top":"0px"})}else{if(position=="absolute"){var css={};if(o.stickySidebar.css("position")!="absolute"){css.position="absolute";css.transform="translateY("+(scrollTop+top-o.sidebar.offset().top-o.stickySidebarPaddingTop-o.stickySidebarPaddingBottom)+"px)";css.top="0px"}css.width=getWidthForObject(o.stickySidebar)+"px";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));if(typeof ResizeSensor!=="undefined"){new ResizeSensor(o.stickySidebar[0],function(o){return function(){o.onScroll(o)}}(o))}function resetSidebar(){o.fixedScrollTop=0;o.sidebar.css({"min-height":"1px"});o.stickySidebar.css({"position":"static","width":"","transform":"none"})}function getClearedHeight(e){var height=e.height();e.children().each(function(){height=Math.max(height,$(this).height())});return height}})}function getWidthForObject(object){var width;try{width=object[0].getBoundingClientRect().width}catch(err){}if(typeof width==="undefined"){width=object.width()}return width}}})(jQuery);

$(document).ready(function() {
	$('#main .all-sidebar').theiaStickySidebar({
		additionalMarginTop: 10, additionalMarginBottom: 10
	});
});


引用脚本中的【additionalMarginTop: 10, additionalMarginBottom: 10】是设置滑动模块距离顶部和底部的距离,单位默认是px


接着就是修改你的侧栏标签身份,id必须为sidebar,书写为(id="sidebar"),然后添加类标签(class="all-sidebar");接着为左侧的主内容标签和侧栏标签添加一个主容器标签,并命名标签身份为(id="main"),整体布局如下:

<div id="main">

<div id="content">左侧内容</div>  <div id="sidebar" class="all-sidebar">右侧滑动栏</div>

</div>


然后保持上传代码,静静的看着侧栏实现上下滑动、屌炸天的效果吧~ 


为了让站长更加的没有门槛可以部署侧栏跟随滚动的效果,我也特此制作了一个demo,大家可以尽情的下载欣赏。


DEMO:牛犊网侧栏滑动demo.7z


作者:琚叶青,牛犊网站长


来源 : 牛犊网(公众号 : Newdur),欢迎转载和分享。

相关文章推荐 网页优化 网络运营

已有0位网友发表了一针见血的评论,你还等什么?来一发

  • 1
    评论  发布于 2018/7/14 21:17:21  回复Ta
  • 接着为左侧的主内容标签和侧栏标签添加

必填

选填

选填

记住我,下次回复时不用重新输入个人信息