这些代码,可以让你网页内的某个元素实现随着滚动条的滚动始终可见,比如文章内的某个元素,或者WordPress侧边栏的随机推荐、广告位等...效果和本站文章页中的share栏一样。
效果如下(图一为原页面中,图二为滚动时,share栏随滚动一直置顶):
页面滚动:
主题要载入jquery库,然后将下面的代码扔进你的js文件中:
(function($){var defaults={topSpacing:0,bottomSpacing:0,className:'is-sticky',wrapperClassName:'sticky-wrapper',center:false,getWidthFrom:''},$window=$(window),$document=$(document),sticked=[],windowHeight=$window.height(),scroller=function(){var scrollTop=$window.scrollTop(),documentHeight=$document.height(),dwh=documentHeight-windowHeight,extra=(scrollTop>dwh)?dwh-scrollTop:0;for(var i=0;i<sticked.length;i++){var s=sticked[i],elementTop=s.stickyWrapper.offset().top,etse=elementTop-s.topSpacing-extra;if(scrollTop<=etse){if(s.currentTop!==null){s.stickyElement.css('position','').css('top','');s.stickyElement.parent().removeClass(s.className);s.currentTop=null;}} else{var newTop=documentHeight-s.stickyElement.outerHeight() -s.topSpacing-s.bottomSpacing-scrollTop-extra;if(newTop<0){newTop=newTop+s.topSpacing;}else{newTop=s.topSpacing;} if(s.currentTop!=newTop){s.stickyElement.css('position','fixed').css('top',newTop);if(typeof s.getWidthFrom!=='undefined'){s.stickyElement.css('width',$(s.getWidthFrom).width());} s.stickyElement.parent().addClass(s.className);s.currentTop=newTop;}}}},resizer=function(){windowHeight=$window.height();},methods={init:function(options){var o=$.extend(defaults,options);return this.each(function(){var stickyElement=$(this);var stickyId=stickyElement.attr('id');var wrapper=$('<div></div>').attr('id',stickyId+'-sticky-wrapper').addClass(o.wrapperClassName);stickyElement.wrapAll(wrapper);if(o.center){stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});} if(stickyElement.css("float")=="right"){stickyElement.css({"float":"none"}).parent().css({"float":"right"});} var stickyWrapper=stickyElement.parent();stickyWrapper.css('height',stickyElement.outerHeight());sticked.push({topSpacing:o.topSpacing,bottomSpacing:o.bottomSpacing,stickyElement:stickyElement,currentTop:null,stickyWrapper:stickyWrapper,className:o.className,getWidthFrom:o.getWidthFrom});});},update:scroller};if(window.addEventListener){window.addEventListener('scroll',scroller,false);window.addEventListener('resize',resizer,false);}else if(window.attachEvent){window.attachEvent('onscroll',scroller);window.attachEvent('onresize',resizer);} $.fn.sticky=function(method){if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1));}else if(typeof method==='object'||!method){return methods.init.apply(this,arguments);}else{$.error('Method '+method+' does not exist on jQuery.sticky');}};$(function(){setTimeout(scroller,0);});})(jQuery);
或者下载附件中的js文件,单独载入,在页面调用:
<script> $(window).load(function(){ $("#header").sticky({ topSpacing: 0 }); }); </script>
其中#header是要实现效果的div。
附件: 本地下载
已经没有折腾的欲望啦。简单点更好。
这个看到一类微站点用得比较多
也就是额外多了一个js语法
@莎龙 不追求效果的话,#更直接。
每日打卡,打卡时间:下午12:37:31
@梦月酱 以后会被打卡统治的。。。。

現在喜歡這個的人還真的是挺多的
@沫 是啊,效果还是蛮不错的。
这个玩意 看到很多人在折腾了
直接CSS好像也可以啊
这样的效果我觉得一般用于 微博和瀑布流比较合适,再说有的人还是喜欢传统分页的方式。好操控。。
不错的效果
我一直在想,这个功能要是调用外部的JS就方便多了!
这个不错,类似于侧边栏滚动
这个会很有用~