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

[joynic]

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

[zythum]

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

[cougar]

通俗的讲是：
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库