如何侧边栏随页面滚动
现在很流行侧边栏随页面滚动这个效果，比如开心网,月光博客,异次元等。
我也搜集整理了下3种方法，全都可以用
第一种
第一步：加载jQ库
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
第二步：将以下js放在<head></head>或<body></body>之间
<script>
(function($){
$.fn.sticky = function(options) {
var defaults = {
topSpacing: 0,
className: 'is-sticky'
};
var options = $.extend(defaults, options);
return this.each(function() {
var topPadding = options.topSpacing,
stickyElement = $(this),
stickyElementHeight = stickyElement.outerHeight(),
stickyElementWidth = stickyElement.outerWidth(),
elementPosition = stickyElement.offset().top - $(window).scrollTop(),
regPosition = stickyElement.offset().top,
stickyId = stickyElement.attr("id");
stickyElement.wrapAll('<div id="' + stickyId + 'StickyWrapper" class="clearfix"></div>');
stickyElement.parent().css("height",stickyElementHeight).css("width",stickyElementWidth);
$(window).scroll(function(){
elementPosition = stickyElement.offset().top - $(window).scrollTop();
if (elementPosition <= topPadding) {
stickyElement.css("position","fixed").css("top",topPadding).addClass(options.className);
}
if ($(window).scrollTop() <= regPosition - topPadding) {
stickyElement.css("position","static").css("top",$(window).scrollTop()).removeClass(options.className);
}
});
});
};
})(jQuery);
$(document).ready(function(){
$("#ss").sticky({topSpacing:0});
});
</script>
第三步：将需要浮动的元素用<div id="ss"> </div>包裹即可
提示：上述代码中#ss和topSpacing:0可自行更改数值
效果参照: http://www.kaixin001.com的右侧侧边栏
第二种
第一步：加载jQ库
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
第二步：将以下js放在<head></head>或<body></body>之间
<script type="text/javascript">
$(document).ready(function(){
$(".post_content a[href='"+window.location.href+"']").addClass("selflink")
$('.selflink').click(function() {return false;});
$.fn.scrollFollow=function(options){options=options||{};options.container=options.container||$(this).parent();options.bottomObj=options.bottomObj||'';options.bottomMargin=options.bottomMargin||0;options.marginTop=options.marginTop||0;options.marginBottom=options.marginBottom||0;$window=$(window),$scrollObj=$(this);if($scrollObj.length<=0){return}scrollObj_Top=$scrollObj.position().top,scrollObj_Container_Height=options.container.height(),scrollObj_Position=$scrollObj.css("position");if(options.bottomObj==''||$(options.bottomObj).length<=0){is_bottomObj_exists=false}else{is_bottomObj_exists=true}$window.scroll(function(event){var new_scrollObj_Container_Height=options.container.height();var scrollObj_Height=$scrollObj.height();if(scrollObj_Container_Height!=new_scrollObj_Container_Height&&scrollObj_Container_Height<new_scrollObj_Container_Height+scrollObj_Height){scrollObj_Top=$scrollObj.position().top;scrollObj_Container_Height=new_scrollObj_Container_Height}scrollTop=$window.scrollTop(),topPosition=Math.max(0,scrollObj_Top-scrollTop);if(is_bottomObj_exists==true){var bottomObj_Top=$(options.bottomObj).position().top-options.marginBottom-options.marginTop;topPosition=Math.min(topPosition,(bottomObj_Top-scrollTop)-scrollObj_Height)}if(scrollTop>scrollObj_Top){if(is_bottomObj_exists==true&&(scrollObj_Top+scrollObj_Height>bottomObj_Top)){$scrollObj.css({position:scrollObj_Position,top:scrollObj_Top})}else{if(window.XMLHttpRequest){$scrollObj.css({position:"fixed",top:topPosition+options.marginTop})}else{$scrollObj.css({position:"absolute",top:scrollTop+topPosition+options.marginTop+'px'})}}}else{$scrollObj.css({position:scrollObj_Position,top:scrollObj_Top})}})};
$("#sidebar_float").scrollFollow({
bottomObj: '.ft',
marginTop:8,
marginBottom:2
});
});
</script>
第三步：将需要浮动的元素用<div id="sidebar_float"> </div>包裹即可
提示：上述代码中#sidebar_float可根据需要修改，
bottomObj: '.ft',的.ft意思是当#sidebar_float滚动时，若接触到.ft则停住滚动
效果参照: http://maolihui.com 的右侧侧边栏
第三种
第一步：加载jQ库
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
第二步：将以下js放在<head></head>或<body></body>之间
<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>
第三步：将需要浮动的元素用<div id="sidebar"> </div>包裹即可
提示：topPadding = 15和#sidebar和368可根据需求，自行更改
这个的确很实用的．．．．
这个不错，学习下！
这个不错，学习下！
很奇怪，不知道为什么我按照本文添加跟屏侧边栏以后，不是等浏览器顶部到达需要跟屏的地方时开始跟屏，而是还有一段距离，跟屏部分就自动弹到浏览器顶部并开始跟屏了，导致会覆盖一部分不滚动的侧边栏。
效果网址：mags.pdfeden.com
效果看上去正常。
很奇怪，不知道为什么我按照本文添加跟屏侧边栏以后，不是等浏览器顶部到达需要跟屏的地方时开始跟屏，而是还有一段距离，跟屏部分就自动弹到浏览器顶部并开始跟屏了，导致会覆盖一部分不滚动的侧边栏。
效果网址：mags.pdfeden.com
效果看上去正常。