V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
joynic
V2EX  ›  问与答

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

  •  
  •   joynic · 2012-02-17 15:14:33 +08:00 · 3623 次点击
    这是一个创建于 4645 天前的主题,其中的信息可能已经有所发展或是发生改变。
    36kr这个网站的左侧栏浮动效果,该怎样实现呢?
    2 条回复    1970-01-01 08:00:00 +08:00
    zythum
        1
    zythum  
       2012-02-17 15:20:37 +08:00
    看下源码么,不是什么难事。
    基本就是position:static和fixed的切换。
    cougar
        2
    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库
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5247 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 09:29 · PVG 17:29 · LAX 01:29 · JFK 04:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.