天中人才市场 发表于 2013-9-18 17:07:20

导航怎么跟随下拉。代码分享

论坛上的这个跟随是写死的。CSS 它这个在顶部没关系。


.header_wrap{
    background:#488fce;/*导航背景*/
    display:block;
    position:fixed;
    _position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:10;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
}

其实这个很简单下面JS。任意位置使用。


$(document).ready(function()
{   
    var nav=$("#wrapper"); //样式插入
    var headHeight=nav.height()+45; //根据自己的导航
    $(window).scroll(function()
    {
    if($(this).scrollTop()>headHeight)
    {
    nav.addClass("navFix");//插入navFix
    }
    else
    {
    nav.removeClass("navFix");
    }
    });
});
下面CSS。回复复制CSS


演示 http://www.zmdsjob.com/company/company.php?comid=66150


**** Hidden Message *****

admin 发表于 2013-9-18 17:38:41

360极速往下拉闪的厉害，拉不下去

alonedrunk 发表于 2013-9-20 15:39:07

看看怎么样

d1rcwkefu 发表于 2013-10-31 20:24:37

石狮人才网谢谢楼主分享啊

spook168 发表于 2013-11-3 13:38:38

太好了，我收下了
页: [1]
查看完整版本: 导航怎么跟随下拉。代码分享