这个网站的左边侧栏的浮动是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4700 天前的主题，其中的信息可能已经有所发展或是发生改变。

36kr这个网站的左侧栏浮动效果，该怎样实现呢？

浮动

网站

侧栏

2 条回复 • 1970-01-01 08:00:00 +08:00

zythum

2012-02-17 15:20:37 +08:00

看下源码么,不是什么难事。
基本就是position:static和fixed的切换。

cougar

2012-02-17 15:24:58 +08:00

通俗的讲是：
css理由属性是position:fixed 可以让div悬浮某位置不动
先写一个css属性：
#MainMenu.fixed {
margin-top: 0;
position: fixed;
top: 20px;
width: 156px;
}
然后用js监测滚动条滚动，当页面滚动超过左侧栏的位置时给#MainMenu添加上面那个fixed的css属性，它就悬浮不动了。

代码很短：
/* Fixed Nav ------------- */
var offset_top = 110;

var headline_pos = $('#main_nav').offset();

$(window).scroll(function()
{
var scroll_top = $(window).scrollTop();

if (scroll_top > (headline_pos.top-offset_top))
{
$('#MainMenu').addClass('fixed');
}
else
{
$('#MainMenu').removeClass('fixed');
}
});

这段之前要先引jquery库