猫头帮常任理事会

如何侧边栏随页面滚动

时间: 2012-05-10 ⁄ 分类: 会长自留地 ⁄ 浏览: 17,891 次

现在很流行侧边栏随页面滚动这个效果,比如开心网,月光博客,异次元等。

我也搜集整理了下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可根据需求,自行更改

关键词:
PREVIOUS:
NEXT:

7条评论

  1. irisivantiffany说道:

    这个的确很实用的....

  2. tennfy说道:

    这个不错,学习下!

  3. tennfy说道:

    这个不错,学习下!

  4. PDF杂志网说道:

    很奇怪,不知道为什么我按照本文添加跟屏侧边栏以后,不是等浏览器顶部到达需要跟屏的地方时开始跟屏,而是还有一段距离,跟屏部分就自动弹到浏览器顶部并开始跟屏了,导致会覆盖一部分不滚动的侧边栏。
    效果网址:mags.pdfeden.com

  5. PDF杂志网说道:

    很奇怪,不知道为什么我按照本文添加跟屏侧边栏以后,不是等浏览器顶部到达需要跟屏的地方时开始跟屏,而是还有一段距离,跟屏部分就自动弹到浏览器顶部并开始跟屏了,导致会覆盖一部分不滚动的侧边栏。
    效果网址:mags.pdfeden.com

  
*昵称:
邮箱:
 网址:
*撰写评论: